Bob's Blog

我用了ckeditor来添加富文本编辑器，不上传视频或文件的话是够用了。不过当需要上传视频的时候，就需要额外的配置。

可以用html5video的插件: https://ckeditor.com/cke4/addon/html5video

首先需要点击download来下载插件zip包，需要注意的是它指明了依赖(other dependencies), 需要一起下载下来。

html5video依赖的是Widget，而widget依赖的是Line Utilities, Clipboard, Widget Selection。(实际上Widget, Line Utilities, Clipboard已经存在了)

下载了zip并解压，这时需要把这些解压的文件夹放进ckeditor的plugins文件夹里，路径样例是: venv/lib/python3.6/site-packages/ckeditor/static/ckeditor/ckeditor/plugins/

之后需要修改settins.py，将html5video加到CKEDITOR_CONFIGS里，如下修改两个地方

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
                    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat', '-', 'Maximize', 'ShowBlocks', '-', "CodeSnippet", 'Subscript', 'Superscript'],
                    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                     'HiddenField'],
                    ['Bold', 'Italic', 'Underline', 'Strike', '-'],
                    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
                    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                    ['Link', 'Unlink', 'Anchor'],
                    ['Image', 'Html5video', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],  # here
                    ['Styles', 'Format', 'Font', 'FontSize'],
                    ['TextColor', 'BGColor'],

                    ),
        'extraPlugins': ','.join(['codesnippet', 'html5video', ]),  # here
    }
}

修改前的编辑器是没有video的

修改后在第三行图片上传右边出现了新的图标

点击按钮便可以弹出视频相关操作

但是，当放在服务器上用nginx代理时，会有错误，富文本编辑器加载有问题，看browser console中的提示是404，访问不了'static/ckeditor/ckeditor/plugins/html5video/plugin.js'。

这个是因为在用ckeditor时，本身加载了ckeditor的一个类似server的东西，地址是对应着nginx.conf中ckeditor的path，而对应到文件的路径是在项目目录下static里，所以现在需要将对应的plugin的static文件都迁移过来。

运行'python manage.py collectstatic'，于是将对应plugin的static文件迁移过来了后，一切恢复正常。

(如果collectstatic提示错误，可以将settings.py中的'STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]' 换做 ’STATIC_ROOT = os.path.join(BASE_DIR, 'static')‘ 后再次运行)