当前栏目:java世界

MVC CKEditor 添加html5video插件

2022-09-13202

准备工作

首先下载插件：https://ckeditor.com/cke4/addon/html5video

检查本地的plugin中是否有widget插件，没有的话需要下载然后解压到本地plugins文件夹中

 

 

将下载的html5video解压到本地plugins文件夹中

添加插件

在config.js中添加

1
    config.extraPlugins = 'html5video,widget';

配置视频上传路径

1
    config.filebrowserHtml5videoUploadUrl = "";//上传视频的地址

 

 

返回的数据格式是

1
2
3
4
5
6
  return Json(new
                {
                    uploaded = 1,
                    url = "",
                    fileName = ""
                });

因为楼主是自定义的工具栏所以，需要将它加入到工具栏中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  config.toolbar = [
        { name: 'document', groups: ['mode', 'document', 'doctools'], items: [ 'Preview','Templates'] },
        { name: 'clipboard', groups: ['clipboard', 'undo'], items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
        { name: 'editing', groups: ['find', 'selection', 'spellchecker'], items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
        { name: 'forms', items: ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton'] },
        '/',
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
        { name: 'insert', items: ['Image', 'Html5video', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'Iframe'] },
        '/',
        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
        { name: 'colors', items: ['TextColor', 'BGColor'] },
        { name: 'others', items: ['-'] }
    ];

    // Toolbar groups configuration.
    config.toolbarGroups = [
        { name: 'document', groups: ['mode', 'document', 'doctools'] },
        { name: 'clipboard', groups: ['clipboard', 'undo'] },
        { name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
        { name: 'forms' },
        '/',
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] },
        { name: 'links' },
        { name: 'insert' },
        '/',
        { name: 'styles' },
        { name: 'colors' },
        { name: 'others' }
    ];

特别坑的是，必须要将html5video改成Html5video,否则工具栏中是不会显示出来的

将语言设置为中文

 

 

运行之后，如果显示的还是英文，则需要检查一下html5video文件夹下的lang文件夹是否有zh-cn.js文件，plugin.js文件中的lang属性是否有zh-cn，没有的话添加进入重新运行即可

相关阅读