ckeditor-html5-video视频插件详细配置

一、下载html5video插件：GitHub - bahriddin/ckeditor-html5-video: HTML5 video plugin for CKEditor

解压插件，将html5video放到site-packages的目录里

二、下载并配置所有依赖项（widget, widgetselection, clipboard, lineutils），均放置于同上目录。

Widget下载地址：Widget | CKEditor.com

然后如图：依次下载另外三个插件：

三、配置html5video插件

1、ckeditor-》config.js-》extraPlugins配置启用html5video插件

config.extraPlugins = 'html5video'; #添加该行内容

2、（此步可省略）配置中文显示语言修改html5video插件的plugins.js文件内容，先在lang文件夹中检查是否有zh-cn.js文件有的话然后进行修改操作，具体如下：

CKEDITOR.plugins.add( 'html5video', {
    requires: 'widget',
    lang: 'bg,ca,de,en,eu,es,ru,uk,fr,ko,pt,pt-br,pl,zh-cn', #在改行添加zh-cn

3、将html5video加到CKEDITOR_CONFIGS，修改Django的setting.py配置文件。

修改二处内容即可。

出错点：第一处的首字母一定要大写，因为复制粘贴忘了大写了导致没成功。研究了好半天，汗！

四、大功告成，重新启动程序。

五、2025.1.14日追加修正：{{ article_post_form.body }}

在用 文档修改页面时，为了CKEDITOR框能显示文档内容，没法直接用

 {{ article_post_form.body }}语句 （新建文档可以直接用，因为不用代入文档body）。我的解决方案：把该语句的源代码还原出来，然后加上{{ article.body }}即可。应该还有原版直接的方法，没查到。我就这样凑合用了，同样达到了目的。如图：

<div class="form-group layui-col-md10">
          <label for="body">正文：</label><a class="layui-font-red layui-font-13">（ 回车：行间距大；shift+回车：行间距小 ）</a><br>
                        {{ article_post_form.media }}
{#                        {{ article_post_form.body }}#}
          <div class="django-ckeditor-widget" data-field-id="id_body" style="display: inline-block;">
                  <textarea name="body" cols="40" rows="10" required id="id_body" data-processed="0" data-config="{&quot;skin&quot;: &quot;moono-lisa&quot;, &quot;toolbar_Basic&quot;: [[&quot;Source&quot;, &quot;-&quot;, &quot;Bold&quot;, &quot;Italic&quot;]], &quot;toolbar_Full&quot;: [[&quot;Styles&quot;, &quot;Format&quot;, &quot;Bold&quot;, &quot;Italic&quot;, &quot;Underline&quot;, &quot;Strike&quot;, &quot;SpellChecker&quot;, &quot;Undo&quot;, &quot;Redo&quot;], [&quot;Link&quot;, &quot;Unlink&quot;, &quot;Anchor&quot;], [&quot;Image&quot;, &quot;Flash&quot;, &quot;Table&quot;, &quot;HorizontalRule&quot;], [&quot;TextColor&quot;, &quot;BGColor&quot;], [&quot;Smiley&quot;, &quot;SpecialChar&quot;], [&quot;Source&quot;]], &quot;toolbar&quot;: &quot;Custom&quot;, &quot;height&quot;: &quot;400px&quot;, &quot;width&quot;: &quot;auto&quot;, &quot;filebrowserWindowWidth&quot;: 940, &quot;filebrowserWindowHeight&quot;: 725, &quot;tabSpaces&quot;: 4, &quot;toolbar_Custom&quot;: [[&quot;Preview&quot;, &quot;ExportPdf&quot;, &quot;Print&quot;], [&quot;Bold&quot;, &quot;Italic&quot;, &quot;Underline&quot;, &quot;Strike&quot;, &quot;-&quot;, &quot;Subscript&quot;, &quot;Superscript&quot;, &quot;RemoveFormat&quot;], [&quot;TextColor&quot;, &quot;BGColor&quot;], [&quot;JustifyLeft&quot;, &quot;JustifyCenter&quot;, &quot;JustifyRight&quot;, &quot;JustifyBlock&quot;], [&quot;Format&quot;, &quot;Font&quot;, &quot;FontSize&quot;], [&quot;NumberedList&quot;, &quot;BulletedList&quot;, &quot;Outdent&quot;, &quot;Indent&quot;], [&quot;Image&quot;, &quot;Html5video&quot;, &quot;Table&quot;, &quot;HorizontalRule&quot;, &quot;Smiley&quot;, &quot;SpecialChar&quot;, &quot;PageBreak&quot;], [&quot;Link&quot;, &quot;Unlink&quot;], [&quot;Maximize&quot;]], &quot;extraPlugins&quot;: &quot;codesnippet,image2,filebrowser,widget,lineutils,html5video&quot;, &quot;filebrowserUploadUrl&quot;: &quot;/ckeditor/upload/&quot;, &quot;filebrowserBrowseUrl&quot;: &quot;/ckeditor/browse/&quot;, &quot;language&quot;: &quot;zh-cn&quot;}" data-external-plugin-resources="[]"
                  data-id="id_body" data-type="ckeditortype">{{ article.body }}</textarea>
          </div>
</div>

源代码还原方法：用网页打开新建文档页面，F12查看源代码即可。

添加ckeditor-html5-video后，该段代码需要再重新还原替代！

特此记录，省的以后又忘了此处重要点！