CKEditor编辑增加HTML5 Video插件的方法

作者：袖梨 2022-06-25

安装步骤
1. 复制到CKEditor 下的"plugins"文件夹
2.然后配置 CKEditor的(config.js) 文件，加入下面的代码，意思是引入插件:

 代码如下 复制代码
config.extraPlugins = 'video';

如果之前已经引入过其他插件，可以用逗号隔开，表示两个插件

 代码如下 复制代码

config.extraPlugins = 'fmath_formula,video';

3.在toolbar 配置中，加入“Video” 项(注意：V要dax)，

例如：

 代码如下 复制代码
 config.toolbar = [
     { name: 'tools', items: ['Maximize', 'ShowBlocks','Source' ] },
  { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
  { name: 'forms', items: [  'TextField','Select' ] },
  { name: 'insert', items: [ 'Image', 'Flash','Video', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak','fmath_formula' ] }
  
 ];

更多信息，查看doc下的install.doc文件。

【修改bug】
之前版本，可以成功添加video，也可以保存到服务器，但是编辑的时候，video和source里面的属性就不翼而飞了，如果再次点保存，得到的结果就是“你的浏览器不支持此播放器.
请直接下载文件”。

【修订代码】

修改videoplugin.js

原来：

 代码如下 复制代码

editor.addCommand( 'Video', new CKEDITOR.dialogCommand( 'video') );
修改为

 //包含属性的标签,也可以增加自定义属性。
var b = "video[controls,id,height,poster,width];source[src,type]";
editor.addCommand( 'Video', new CKEDITOR.dialogCommand( 'video', {
            allowedContent: b,//允许的内容
            requiredContent: "video"
        } ) );

顺便汉化了一下，现在有一个遗憾，就是没加上传代码。

相关文章

精彩推荐