C# MVC CKEditor 添加html5video插件

准备工作

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

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

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

添加插件

    在config.js中添加 

    config.extraPlugins = 'html5video,widget';     

 配置视频上传路径    

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

返回的数据格式是

  return Json(new
                {
                    uploaded = 1,
                    url = "",
                    fileName = ""
                });

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

  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,没有的话添加进入重新运行即可

 

你可能感兴趣的:(C# MVC CKEditor 添加html5video插件)