带有 Django 的 ckeditor 的 YoutubePlugin

YoutubePlugin of ckeditor with Django

实际上我在 Django 网站上工作,我使用 CKEditor 输入富文本,效果很好。

但是当我尝试将youtube插件添加到ckeditor的默认设置中时,总是出现404错误说找不到js文件。不知道是设置问题还是什么。

我关注了https://github.com/django-ckeditor/django-ckeditor#installation to install ckeditor. And downloaded YoutubePlugin from https://ckeditor.com/cke4/addon/youtube。我将 youtube 文件夹解压到 /myproject/staticfiles/ckeditor/ckeditor/plugins.

这是我的设置。

STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles/'
CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moonocolor',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_YourCustomToolbarConfig': [
            {'name': 'document', 'items': ['Source']},
            {'name': 'clipboard', 'items': ['Undo', 'Redo']},
            {'name': 'editing', 'items': ['Find', 'Replace']},
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
            '/',
            {'name': 'insert',
             'items': ['Image', 'Flash', 'Youtube', 'Table', 'HorizontalRule']},
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
        ],
        'tabSpaces': 4,
        'height': 300,
        'width': '100%',
        'extraPlugins': 'youtube',
    },
}

还有 models.py

class Post(models.Model):
    STATUS_CHOICES = (
        ('draft', 'Draft'),
        ('published', 'Published'),
    )
    title = models.CharField(max_length=250)
    slug = models.SlugField(max_length=250, unique_for_date='publish')
    author = models.ForeignKey(User, related_name='blog_posts', on_delete=models.CASCADE)
    body = RichTextUploadingField(blank=True, null=True,)
    publish = models.DateTimeField(default=timezone.now)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='draft')

    # The default manager
    objects = models.Manager()

    # Custom made manager
    published = PublishedManager()
    tags = TaggableManager()

    class Meta:
        ordering = ('-publish',)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('blog:post_detail_view',args=[self.publish.year, self.publish.strftime('%m'), self.publish.strftime('%d'), self.slug])

还有我的文件系统

我自己的愚蠢问题。 对于 404 错误,这是因为应用程序静态文件。 Django 从应用程序目录中的静态文件夹中查找应用程序的静态文件。在我的 /blog/static 中没有 ckeditor 文件夹。使用 plugins 文件夹中的 youtube 插件将整个 ckeditor 文件夹复制到 /blog/static 并修复。

现在配置:

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_YourCustomToolbarConfig': [
            {'name': 'document', 'items': ['Source']},
            {'name': 'clipboard', 'items': ['Undo', 'Redo']},
            {'name': 'insert',
             'items': ['Image', 'Youtube', 'Flash', 'Table', 'HorizontalRule']},
            {'name': 'editing', 'items': ['Find', 'Replace']},
            '/',
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
            {'name': 'links', 'items': ['Link', 'Unlink']},
            '/',
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
        ],
        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
        # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
        'height': 420,
        'width': '100%',
        # 'filebrowserWindowHeight': 725,
        # 'filebrowserWindowWidth': 940,
        # 'toolbarCanCollapse': True,
        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage', # the upload image feature
            # your extra plugins here
            'youtube',
        ]),
    }
}