DJANGO CMS ckeditor编辑器无法上传视频解决方案

Soogor CMS使用ckeditor编辑器，但是ckeditor编辑器默认无法上传视频，所以我们需要自定义。

我们已经为大家创建了虚拟世界之外的文件，所以需要您手动添加CK视频插件。

在Soogor CMS中添加ckeditor视频编辑器的完整流程如下。您可以根据需要工作

1。下载插件：

官方插件地址：HTML5视频| CKEditor.com. -找到下载的包并解压html5video文件夹，并将其添加到目标venv/lib /python3.9/site-packages/ckeditor/static/ckeditor/ckeditor/plugins

3。编辑ck config.js

文件位置：venv/lib/python3.9/site-packages/ckeditor/static/ckeditor/ckeditor

/**
 * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'html5video';

};

4.设置CKEDITOR_CONFIGS

打开settings.py，找到CKEDITOR_CONFIGS

CKEDITOR_CONFIGS = {
    # 配置名是default时，django-ckeditor默认使用这个配置
    'default': {
        # 使用简体中文
        'language': 'zh-cn',
        # 编辑器的宽高请根据你的页面自行设置
        'width': '100%',
        'height': '600px',
        'image_previewText': ' ',
        # 'tabSpaces': 4,
        'toolbar': 'full',  # 完整工具条
        # 'toolbar': 'custom',  # 常用工具条
        # 添加按钮在这里
        # 'toolbar_Custom': [
        #     ['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
        #     ['NumberedList', 'BulletedList'],
        #     ['Blockquote', 'CodeSnippet'],
        #     ['Image', 'Link', 'Unlink'],
        #     ['Maximize']
        # ],
        # 插件
        'extraPlugins': ','.join(['codesnippet', 'uploadimage', 'widget', 'lineutils', 'html5video', ]),
    }
}

这里注意，我用的是完整版工具，所以只有html5video需要添加'extraPlugins'就可以了。

目前我们的CK还没有任何视频上传。有用户此时打开CK显示正常，但没有视频流功能。有网友打开编辑器，发现里面是空的。 F12 查看文件并加载它

发现文件“/plugins/html5video/plugin.js”失败。

如果我们在本地编辑，我们可以直接运行“python manage.pycollectstatic”，并在迁移后将静态上传到服务器。

您也可以直接在服务器上工作。但有时会发生这种情况。只能根据自己建站、迁移静态的经验来做

完成这些任务后，我们再次打开编辑器，出现下载视频按钮，但是中文版本不适合，所以单独观看和播放。特效如下：

5。编辑banner

目前我们上传的视频无法在前端播放。播放器代码如下：

<video controlslist="nodownload"  >&nbsp;</video>

播放器代码中的视频代码并没有调整控件属性，所以我们在代码末尾添加一个脚本

<script>
    // video播放，没有指定 controls 属性，视频不会展示浏览器自带的控件

    $('video').attr('controls',true);
  </script>

这样我们的播放器就可以合法使用了。

注意：mp4文件的转换为“AVC(H264)”

我们还需要考虑另一个问题，浏览器将mp4文件的转换为“AVC(H264)”

我们需要你搞砸编码，我已经被困在这里很长时间了才出来。