ckeditor5的配置以及使用方法

一．自定义并构建CKEditor 5

进入https://ckeditor.com/ckeditor-5/online-builder/，根据这五个步骤即可自定义构建CKEditor 5

 

 

 

 

二．CKEditor 5文件详解

 

1. translations：打包后的语言包
2. ckeditor.js、ckeditor.js.map：js配置，里面包含css样式，无论是编辑器页面还是显示内容页面都需要引入（之前显示内容时图片不自适应就是没有引入该文件）
3. editor.js：进行功能配置的js文件，在编辑器页面引入
4. index.html：富文本编辑器测试页面 最外面div必须加上id名（可自定义）
5. ceshi.html：显示内容页面 最外面的div样式名必须为ck-content

 

三．editor.js配置说明

1. 调用ClassicEditor.create()方法

toolbar:配置在导航栏显示的功能按钮以及位置

 

 

 

 

 2.图片上传

  

3.自定义providers,给上传的视频链接设置相应的html，让其可以正常在富文本编辑器中显示

 

4.自定义字体，字体中文名在前，英文编码在后，用逗号隔开

 

5.将编辑器输出给到全局变量

 

6.获取内容数据以及将html转换为编辑器内容的API，无论是获取编辑器内容还是将html片段插入到编辑器中都需要对某些字段进行转换（获取编辑器内容后将oembed标签转换为video标签；给编辑器插入内容之前将video标签转换为oembed标签，同时还要清理上次插入的数据）

 

7.获取的内容数据中视频由浏览器无法识别的标签包裹，所以需要对其进行替换，使其在网页中正常显示。

 

8.初始化编辑器实例必须通过id获取标签，但是可以单独将配置对象赋值给config变量,初始化多个编辑器时将config传进去就可以实现修改一个配置影响多个编辑器实例。

 

9.字号支持数字大小

在配置中添加fontSize，最小12px

 

10.设置编辑器的宽和最小高度、最大高度、固定高度

 

11.配置字体颜色和字体背景颜色

 

 

 

12.设置图片放置的位置以及百分比

 

 

 

13.更加详细的配置说明：https://ckeditor.com/docs/ckeditor5/latest/features/image.html

 

 

 

配置代码

//配置选项
const config = {
    //功能模块
    toolbar: {
        items: [
            'heading',
            '|',
            'bold',
            'italic',
            'underline',
            'fontColor',
            'fontBackgroundColor',
            'fontSize',
            'fontFamily',
            'highlight',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'link',
            'imageUpload',
            'imageInsert',
            'mediaEmbed',
            '|',
            'blockQuote',
            'strikethrough',
            'specialCharacters',
            'superscript',
            'subscript',
            'insertTable',
            'undo',
            'redo',
            'alignment'
        ],
        shouldNotGroupWhenFull:true
    },
    //设置字体大小
    fontSize: {
        options: [
            12,
            14,
            16,
            18,
            20,
            22,
            24,
            26,
            28,
            30,
            32,
            34,
            36
            
        ]
    },
    //设置字体颜色
    fontColor: {
        colors: [
            {
                color: 'hsl(0, 0%, 0%)',
                label: 'hsl(0, 0%, 0%)'
            },
            {
                color: 'hsl(0, 0%, 12.5%)',
                label: 'hsl(0, 0%, 12.5%)'
            },
            {
                color: 'hsl(0, 0%, 25%)',
                label: 'hsl(0, 0%, 25%)'
            },
            {
                color: 'hsl(0, 0%, 37.5%)',
                label: 'hsl(0, 0%, 37.5%)'
            },
            {
                color: 'hsl(0, 0%, 50%)',
                label: 'hsl(0, 0%, 50%)'
            },
            {
                color: 'hsl(0, 0%, 62.5%)',
                label: 'hsl(0, 0%, 62.5%)'
            },
            {
                color: 'hsl(0, 0%, 75%)',
                label: 'hsl(0, 0%, 75%)'
            },
            {
                color: 'hsl(0, 0%, 87.5%)',
                label: 'hsl(0, 0%, 87.5%)'
            },
            {
                color: 'hsl(0, 0%, 100%)',
                label: 'hsl(0, 0%, 100%)'
            },
            {
                color: 'hsl(0, 100%, 10%)',
                label: 'hsl(0, 100%, 10%)'
            },
            {
                color: 'hsl(0, 100%, 20%)',
                label: 'hsl(0, 100%, 20%)'
            },
            {
                color: 'hsl(0, 100%, 30%)',
                label: 'hsl(0, 100%, 30%)'
            },
            {
                color: 'hsl(0, 100%, 40%)',
                label: 'hsl(0, 100%, 40%)'
            },
            {
                color: 'hsl(0, 100%, 50%)',
                label: 'hsl(0, 100%, 50%)'
            },
            {
                color: 'hsl(0, 100%, 60%)',
                label: 'hsl(0, 100%, 60%)'
            },
            {
                color: 'hsl(0, 100%, 70%)',
                label: 'hsl(0, 100%, 70%)'
            },
            {
                color: 'hsl(0, 100%, 80%)',
                label: 'hsl(0, 100%, 80%)'
            },
            {
                color: 'hsl(0, 100%, 90%)',
                label: 'hsl(0, 100%, 90%)'
            },
            {
                color: 'hsl(30, 100%, 10%)',
                label: 'hsl(30, 100%, 10%)'
            },
            {
                color: 'hsl(30, 100%, 20%)',
                label: 'hsl(30, 100%, 20%)'
            },
            {
                color: 'hsl(30, 100%, 30%)',
                label: 'hsl(30, 100%, 30%)'
            },
            {
                color: 'hsl(30, 100%, 40%)',
                label: 'hsl(30, 100%, 40%)'
            },
            {
                color: 'hsl(30, 100%, 50%)',
                label: 'hsl(30, 100%, 50%)'
            },
            {
                color: 'hsl(30, 100%, 60%)',
                label: 'hsl(30, 100%, 60%)'
            },
            {
                color: 'hsl(30, 100%, 70%)',
                label: 'hsl(30, 100%, 70%)'
            },
            {
                color: 'hsl(30, 100%, 80%)',
                label: 'hsl(30, 100%, 80%)'
            },
            {
                color: 'hsl(30, 100%, 90%)',
                label: 'hsl(30, 100%, 90%)'
            },
            {
                color: 'hsl(60, 100%, 10%)',
                label: 'hsl(60, 100%, 10%)'
            },
            {
                color: 'hsl(60, 100%, 20%)',
                label: 'hsl(60, 100%, 20%)'
            },
            {
                color: 'hsl(60, 100%, 30%)',
                label: 'hsl(60, 100%, 30%)'
            },
            {
                color: 'hsl(60, 100%, 40%)',
                label: 'hsl(60, 100%, 40%)'
            },
            {
                color: 'hsl(60, 100%, 50%)',
                label: 'hsl(60, 100%, 50%)'
            },
            {
                color: 'hsl(60, 100%, 60%)',
                label: 'hsl(60, 100%, 60%)'
            },
            {
                color: 'hsl(60, 100%, 70%)',
                label: 'hsl(60, 100%, 70%)'
            },
            {
                color: 'hsl(60, 100%, 80%)',
                label: 'hsl(60, 100%, 80%)'
            },
            {
                color: 'hsl(60, 100%, 90%)',
                label: 'hsl(60, 100%, 90%)'
            },
            {
                color: 'hsl(90, 100%, 10%)',
                label: 'hsl(90, 100%, 10%)'
            },
            {
                color: 'hsl(90, 100%, 20%)',
                label: 'hsl(90, 100%, 20%)'
            },
            {
                color: 'hsl(90, 100%, 30%)',
                label: 'hsl(90, 100%, 30%)'
            },
            {
                color: 'hsl(90, 100%, 40%)',
                label: 'hsl(90, 100%, 40%)'
            },
            {
                color: 'hsl(90, 100%, 50%)',
                label: 'hsl(90, 100%, 50%)'
            },
            {
                color: 'hsl(90, 100%, 60%)',
                label: 'hsl(90, 100%, 60%)'
            },
            {
                color: 'hsl(90, 100%, 70%)',
                label: 'hsl(90, 100%, 70%)'
            },
            {
                color: 'hsl(90, 100%, 80%)',
                label: 'hsl(90, 100%, 80%)'
            },
            {
                color: 'hsl(90, 100%, 90%)',
                label: 'hsl(90, 100%, 90%)'
            },
            {
                color: 'hsl(120, 100%, 10%)',
                label: 'hsl(120, 100%, 10%)'
            },
            {
                color: 'hsl(120, 100%, 20%)',
                label: 'hsl(120, 100%, 20%)'
            },
            {
                color: 'hsl(120, 100%, 30%)',
                label: 'hsl(120, 100%, 30%)'
            },
            {
                color: 'hsl(120, 100%, 40%)',
                label: 'hsl(120, 100%, 40%)'
            },
            {
                color: 'hsl(120, 100%, 50%)',
                label: 'hsl(120, 100%, 50%)'
            },
            {
                color: 'hsl(120, 100%, 60%)',
                label: 'hsl(120, 100%, 60%)'
            },
            {
                color: 'hsl(120, 100%, 70%)',
                label: 'hsl(120, 100%, 70%)'
            },
            {
                color: 'hsl(120, 100%, 80%)',
                label: 'hsl(120, 100%, 80%)'
            },
            {
                color: 'hsl(120, 100%, 90%)',
                label: 'hsl(120, 100%, 90%)'
            },
            {
                color: 'hsl(150, 100%, 10%)',
                label: 'hsl(150, 100%, 10%)'
            },
            {
                color: 'hsl(150, 100%, 20%)',
                label: 'hsl(150, 100%, 20%)'
            },
            {
                color: 'hsl(150, 100%, 30%)',
                label: 'hsl(150, 100%, 30%)'
            },
            {
                color: 'hsl(150, 100%, 40%)',
                label: 'hsl(150, 100%, 40%)'
            },
            {
                color: 'hsl(150, 100%, 50%)',
                label: 'hsl(150, 100%, 50%)'
            },
            {
                color: 'hsl(150, 100%, 60%)',
                label: 'hsl(150, 100%, 60%)'
            },
            {
                color: 'hsl(150, 100%, 70%)',
                label: 'hsl(150, 100%, 70%)'
            },
            {
                color: 'hsl(150, 100%, 80%)',
                label: 'hsl(150, 100%, 80%)'
            },
            {
                color: 'hsl(150, 100%, 90%)',
                label: 'hsl(150, 100%, 90%)'
            },
            {
                color: 'hsl(180, 100%, 10%)',
                label: 'hsl(180, 100%, 10%)'
            },
            {
                color: 'hsl(180, 100%, 20%)',
                label: 'hsl(180, 100%, 20%)'
            },
            {
                color: 'hsl(180, 100%, 30%)',
                label: 'hsl(180, 100%, 30%)'
            },
            {
                color: 'hsl(180, 100%, 40%)',
                label: 'hsl(180, 100%, 40%)'
            },
            {
                color: 'hsl(180, 100%, 50%)',
                label: 'hsl(180, 100%, 50%)'
            },
            {
                color: 'hsl(180, 100%, 60%)',
                label: 'hsl(180, 100%, 60%)'
            },
            {
                color: 'hsl(180, 100%, 70%)',
                label: 'hsl(180, 100%, 70%)'
            },
            {
                color: 'hsl(180, 100%, 80%)',
                label: 'hsl(180, 100%, 80%)'
            },
            {
                color: 'hsl(180, 100%, 90%)',
                label: 'hsl(180, 100%, 90%)'
            },
            {
                color: 'hsl(210, 100%, 10%)',
                label: 'hsl(210, 100%, 10%)'
            },
            {
                color: 'hsl(210, 100%, 20%)',
                label: 'hsl(210, 100%, 20%)'
            },
            {
                color: 'hsl(210, 100%, 30%)',
                label: 'hsl(210, 100%, 30%)'
            },
            {
                color: 'hsl(210, 100%, 40%)',
                label: 'hsl(210, 100%, 40%)'
            },
            {
                color: 'hsl(210, 100%, 50%)',
                label: 'hsl(210, 100%, 50%)'
            },
            {
                color: 'hsl(210, 100%, 60%)',
                label: 'hsl(210, 100%, 60%)'
            },
            {
                color: 'hsl(210, 100%, 70%)',
                label: 'hsl(210, 100%, 70%)'
            },
            {
                color: 'hsl(210, 100%, 80%)',
                label: 'hsl(210, 100%, 80%)'
            },
            {
                color: 'hsl(210, 100%, 90%)',
                label: 'hsl(210, 100%, 90%)'
            },
            {
                color: 'hsl(240, 100%, 10%)',
                label: 'hsl(240, 100%, 10%)'
            },
            {
                color: 'hsl(240, 100%, 20%)',
                label: 'hsl(240, 100%, 20%)'
            },
            {
                color: 'hsl(240, 100%, 30%)',
                label: 'hsl(240, 100%, 30%)'
            },
            {
                color: 'hsl(240, 100%, 40%)',
                label: 'hsl(240, 100%, 40%)'
            },
            {
                color: 'hsl(240, 100%, 50%)',
                label: 'hsl(240, 100%, 50%)'
            },
            {
                color: 'hsl(240, 100%, 60%)',
                label: 'hsl(240, 100%, 60%)'
            },
            {
                color: 'hsl(240, 100%, 70%)',
                label: 'hsl(240, 100%, 70%)'
            },
            {
                color: 'hsl(240, 100%, 80%)',
                label: 'hsl(240, 100%, 80%)'
            },
            {
                color: 'hsl(240, 100%, 90%)',
                label: 'hsl(240, 100%, 90%)'
            },
            {
                color: 'hsl(270, 100%, 10%)',
                label: 'hsl(270, 100%, 10%)'
            },
            {
                color: 'hsl(270, 100%, 20%)',
                label: 'hsl(270, 100%, 20%)'
            },
            {
                color: 'hsl(270, 100%, 30%)',
                label: 'hsl(270, 100%, 30%)'
            },
            {
                color: 'hsl(270, 100%, 40%)',
                label: 'hsl(270, 100%, 40%)'
            },
            {
                color: 'hsl(270, 100%, 50%)',
                label: 'hsl(270, 100%, 50%)'
            },
            {
                color: 'hsl(270, 100%, 60%)',
                label: 'hsl(270, 100%, 60%)'
            },
            {
                color: 'hsl(270, 100%, 70%)',
                label: 'hsl(270, 100%, 70%)'
            },
            {
                color: 'hsl(270, 100%, 80%)',
                label: 'hsl(270, 100%, 80%)'
            },
            {
                color: 'hsl(270, 100%, 90%)',
                label: 'hsl(270, 100%, 90%)'
            },
            {
                color: 'hsl(300, 100%, 10%)',
                label: 'hsl(300, 100%, 10%)'
            },
            {
                color: 'hsl(300, 100%, 20%)',
                label: 'hsl(300, 100%, 20%)'
            },
            {
                color: 'hsl(300, 100%, 30%)',
                label: 'hsl(300, 100%, 30%)'
            },
            {
                color: 'hsl(300, 100%, 40%)',
                label: 'hsl(300, 100%, 40%)'
            },
            {
                color: 'hsl(300, 100%, 50%)',
                label: 'hsl(300, 100%, 50%)'
            },
            {
                color: 'hsl(300, 100%, 60%)',
                label: 'hsl(300, 100%, 60%)'
            },
            {
                color: 'hsl(300, 100%, 70%)',
                label: 'hsl(300, 100%, 70%)'
            },
            {
                color: 'hsl(300, 100%, 80%)',
                label: 'hsl(300, 100%, 80%)'
            },
            {
                color: 'hsl(300, 100%, 90%)',
                label: 'hsl(300, 100%, 90%)'
            },
            {
                color: 'hsl(330, 100%, 10%)',
                label: 'hsl(330, 100%, 10%)'
            },
            {
                color: 'hsl(330, 100%, 20%)',
                label: 'hsl(330, 100%, 20%)'
            },
            {
                color: 'hsl(330, 100%, 30%)',
                label: 'hsl(330, 100%, 30%)'
            },
            {
                color: 'hsl(330, 100%, 40%)',
                label: 'hsl(330, 100%, 40%)'
            },
            {
                color: 'hsl(330, 100%, 50%)',
                label: 'hsl(330, 100%, 50%)'
            },
            {
                color: 'hsl(330, 100%, 60%)',
                label: 'hsl(330, 100%, 60%)'
            },
            {
                color: 'hsl(330, 100%, 70%)',
                label: 'hsl(330, 100%, 70%)'
            },
            {
                color: 'hsl(330, 100%, 80%)',
                label: 'hsl(330, 100%, 80%)'
            },
            {
                color: 'hsl(330, 100%, 90%)',
                label: 'hsl(330, 100%, 90%)'
            },
        ],
        //列
        columns: 9,
    },
    //设置字体背景颜色
    fontBackgroundColor: {
        colors: [
            {
                color: 'hsl(0, 0%, 0%)',
                label: 'hsl(0, 0%, 0%)'
            },
            {
                color: 'hsl(0, 0%, 12.5%)',
                label: 'hsl(0, 0%, 12.5%)'
            },
            {
                color: 'hsl(0, 0%, 25%)',
                label: 'hsl(0, 0%, 25%)'
            },
            {
                color: 'hsl(0, 0%, 37.5%)',
                label: 'hsl(0, 0%, 37.5%)'
            },
            {
                color: 'hsl(0, 0%, 50%)',
                label: 'hsl(0, 0%, 50%)'
            },
            {
                color: 'hsl(0, 0%, 62.5%)',
                label: 'hsl(0, 0%, 62.5%)'
            },
            {
                color: 'hsl(0, 0%, 75%)',
                label: 'hsl(0, 0%, 75%)'
            },
            {
                color: 'hsl(0, 0%, 87.5%)',
                label: 'hsl(0, 0%, 87.5%)'
            },
            {
                color: 'hsl(0, 0%, 100%)',
                label: 'hsl(0, 0%, 100%)'
            },
            {
                color: 'hsl(0, 100%, 10%)',
                label: 'hsl(0, 100%, 10%)'
            },
            {
                color: 'hsl(0, 100%, 20%)',
                label: 'hsl(0, 100%, 20%)'
            },
            {
                color: 'hsl(0, 100%, 30%)',
                label: 'hsl(0, 100%, 30%)'
            },
            {
                color: 'hsl(0, 100%, 40%)',
                label: 'hsl(0, 100%, 40%)'
            },
            {
                color: 'hsl(0, 100%, 50%)',
                label: 'hsl(0, 100%, 50%)'
            },
            {
                color: 'hsl(0, 100%, 60%)',
                label: 'hsl(0, 100%, 60%)'
            },
            {
                color: 'hsl(0, 100%, 70%)',
                label: 'hsl(0, 100%, 70%)'
            },
            {
                color: 'hsl(0, 100%, 80%)',
                label: 'hsl(0, 100%, 80%)'
            },
            {
                color: 'hsl(0, 100%, 90%)',
                label: 'hsl(0, 100%, 90%)'
            },
            {
                color: 'hsl(30, 100%, 10%)',
                label: 'hsl(30, 100%, 10%)'
            },
            {
                color: 'hsl(30, 100%, 20%)',
                label: 'hsl(30, 100%, 20%)'
            },
            {
                color: 'hsl(30, 100%, 30%)',
                label: 'hsl(30, 100%, 30%)'
            },
            {
                color: 'hsl(30, 100%, 40%)',
                label: 'hsl(30, 100%, 40%)'
            },
            {
                color: 'hsl(30, 100%, 50%)',
                label: 'hsl(30, 100%, 50%)'
            },
            {
                color: 'hsl(30, 100%, 60%)',
                label: 'hsl(30, 100%, 60%)'
            },
            {
                color: 'hsl(30, 100%, 70%)',
                label: 'hsl(30, 100%, 70%)'
            },
            {
                color: 'hsl(30, 100%, 80%)',
                label: 'hsl(30, 100%, 80%)'
            },
            {
                color: 'hsl(30, 100%, 90%)',
                label: 'hsl(30, 100%, 90%)'
            },
            {
                color: 'hsl(60, 100%, 10%)',
                label: 'hsl(60, 100%, 10%)'
            },
            {
                color: 'hsl(60, 100%, 20%)',
                label: 'hsl(60, 100%, 20%)'
            },
            {
                color: 'hsl(60, 100%, 30%)',
                label: 'hsl(60, 100%, 30%)'
            },
            {
                color: 'hsl(60, 100%, 40%)',
                label: 'hsl(60, 100%, 40%)'
            },
            {
                color: 'hsl(60, 100%, 50%)',
                label: 'hsl(60, 100%, 50%)'
            },
            {
                color: 'hsl(60, 100%, 60%)',
                label: 'hsl(60, 100%, 60%)'
            },
            {
                color: 'hsl(60, 100%, 70%)',
                label: 'hsl(60, 100%, 70%)'
            },
            {
                color: 'hsl(60, 100%, 80%)',
                label: 'hsl(60, 100%, 80%)'
            },
            {
                color: 'hsl(60, 100%, 90%)',
                label: 'hsl(60, 100%, 90%)'
            },
            {
                color: 'hsl(90, 100%, 10%)',
                label: 'hsl(90, 100%, 10%)'
            },
            {
                color: 'hsl(90, 100%, 20%)',
                label: 'hsl(90, 100%, 20%)'
            },
            {
                color: 'hsl(90, 100%, 30%)',
                label: 'hsl(90, 100%, 30%)'
            },
            {
                color: 'hsl(90, 100%, 40%)',
                label: 'hsl(90, 100%, 40%)'
            },
            {
                color: 'hsl(90, 100%, 50%)',
                label: 'hsl(90, 100%, 50%)'
            },
            {
                color: 'hsl(90, 100%, 60%)',
                label: 'hsl(90, 100%, 60%)'
            },
            {
                color: 'hsl(90, 100%, 70%)',
                label: 'hsl(90, 100%, 70%)'
            },
            {
                color: 'hsl(90, 100%, 80%)',
                label: 'hsl(90, 100%, 80%)'
            },
            {
                color: 'hsl(90, 100%, 90%)',
                label: 'hsl(90, 100%, 90%)'
            },
            {
                color: 'hsl(120, 100%, 10%)',
                label: 'hsl(120, 100%, 10%)'
            },
            {
                color: 'hsl(120, 100%, 20%)',
                label: 'hsl(120, 100%, 20%)'
            },
            {
                color: 'hsl(120, 100%, 30%)',
                label: 'hsl(120, 100%, 30%)'
            },
            {
                color: 'hsl(120, 100%, 40%)',
                label: 'hsl(120, 100%, 40%)'
            },
            {
                color: 'hsl(120, 100%, 50%)',
                label: 'hsl(120, 100%, 50%)'
            },
            {
                color: 'hsl(120, 100%, 60%)',
                label: 'hsl(120, 100%, 60%)'
            },
            {
                color: 'hsl(120, 100%, 70%)',
                label: 'hsl(120, 100%, 70%)'
            },
            {
                color: 'hsl(120, 100%, 80%)',
                label: 'hsl(120, 100%, 80%)'
            },
            {
                color: 'hsl(120, 100%, 90%)',
                label: 'hsl(120, 100%, 90%)'
            },
            {
                color: 'hsl(150, 100%, 10%)',
                label: 'hsl(150, 100%, 10%)'
            },
            {
                color: 'hsl(150, 100%, 20%)',
                label: 'hsl(150, 100%, 20%)'
            },
            {
                color: 'hsl(150, 100%, 30%)',
                label: 'hsl(150, 100%, 30%)'
            },
            {
                color: 'hsl(150, 100%, 40%)',
                label: 'hsl(150, 100%, 40%)'
            },
            {
                color: 'hsl(150, 100%, 50%)',
                label: 'hsl(150, 100%, 50%)'
            },
            {
                color: 'hsl(150, 100%, 60%)',
                label: 'hsl(150, 100%, 60%)'
            },
            {
                color: 'hsl(150, 100%, 70%)',
                label: 'hsl(150, 100%, 70%)'
            },
            {
                color: 'hsl(150, 100%, 80%)',
                label: 'hsl(150, 100%, 80%)'
            },
            {
                color: 'hsl(150, 100%, 90%)',
                label: 'hsl(150, 100%, 90%)'
            },
            {
                color: 'hsl(180, 100%, 10%)',
                label: 'hsl(180, 100%, 10%)'
            },
            {
                color: 'hsl(180, 100%, 20%)',
                label: 'hsl(180, 100%, 20%)'
            },
            {
                color: 'hsl(180, 100%, 30%)',
                label: 'hsl(180, 100%, 30%)'
            },
            {
                color: 'hsl(180, 100%, 40%)',
                label: 'hsl(180, 100%, 40%)'
            },
            {
                color: 'hsl(180, 100%, 50%)',
                label: 'hsl(180, 100%, 50%)'
            },
            {
                color: 'hsl(180, 100%, 60%)',
                label: 'hsl(180, 100%, 60%)'
            },
            {
                color: 'hsl(180, 100%, 70%)',
                label: 'hsl(180, 100%, 70%)'
            },
            {
                color: 'hsl(180, 100%, 80%)',
                label: 'hsl(180, 100%, 80%)'
            },
            {
                color: 'hsl(180, 100%, 90%)',
                label: 'hsl(180, 100%, 90%)'
            },
            {
                color: 'hsl(210, 100%, 10%)',
                label: 'hsl(210, 100%, 10%)'
            },
            {
                color: 'hsl(210, 100%, 20%)',
                label: 'hsl(210, 100%, 20%)'
            },
            {
                color: 'hsl(210, 100%, 30%)',
                label: 'hsl(210, 100%, 30%)'
            },
            {
                color: 'hsl(210, 100%, 40%)',
                label: 'hsl(210, 100%, 40%)'
            },
            {
                color: 'hsl(210, 100%, 50%)',
                label: 'hsl(210, 100%, 50%)'
            },
            {
                color: 'hsl(210, 100%, 60%)',
                label: 'hsl(210, 100%, 60%)'
            },
            {
                color: 'hsl(210, 100%, 70%)',
                label: 'hsl(210, 100%, 70%)'
            },
            {
                color: 'hsl(210, 100%, 80%)',
                label: 'hsl(210, 100%, 80%)'
            },
            {
                color: 'hsl(210, 100%, 90%)',
                label: 'hsl(210, 100%, 90%)'
            },
            {
                color: 'hsl(240, 100%, 10%)',
                label: 'hsl(240, 100%, 10%)'
            },
            {
                color: 'hsl(240, 100%, 20%)',
                label: 'hsl(240, 100%, 20%)'
            },
            {
                color: 'hsl(240, 100%, 30%)',
                label: 'hsl(240, 100%, 30%)'
            },
            {
                color: 'hsl(240, 100%, 40%)',
                label: 'hsl(240, 100%, 40%)'
            },
            {
                color: 'hsl(240, 100%, 50%)',
                label: 'hsl(240, 100%, 50%)'
            },
            {
                color: 'hsl(240, 100%, 60%)',
                label: 'hsl(240, 100%, 60%)'
            },
            {
                color: 'hsl(240, 100%, 70%)',
                label: 'hsl(240, 100%, 70%)'
            },
            {
                color: 'hsl(240, 100%, 80%)',
                label: 'hsl(240, 100%, 80%)'
            },
            {
                color: 'hsl(240, 100%, 90%)',
                label: 'hsl(240, 100%, 90%)'
            },
            {
                color: 'hsl(270, 100%, 10%)',
                label: 'hsl(270, 100%, 10%)'
            },
            {
                color: 'hsl(270, 100%, 20%)',
                label: 'hsl(270, 100%, 20%)'
            },
            {
                color: 'hsl(270, 100%, 30%)',
                label: 'hsl(270, 100%, 30%)'
            },
            {
                color: 'hsl(270, 100%, 40%)',
                label: 'hsl(270, 100%, 40%)'
            },
            {
                color: 'hsl(270, 100%, 50%)',
                label: 'hsl(270, 100%, 50%)'
            },
            {
                color: 'hsl(270, 100%, 60%)',
                label: 'hsl(270, 100%, 60%)'
            },
            {
                color: 'hsl(270, 100%, 70%)',
                label: 'hsl(270, 100%, 70%)'
            },
            {
                color: 'hsl(270, 100%, 80%)',
                label: 'hsl(270, 100%, 80%)'
            },
            {
                color: 'hsl(270, 100%, 90%)',
                label: 'hsl(270, 100%, 90%)'
            },
            {
                color: 'hsl(300, 100%, 10%)',
                label: 'hsl(300, 100%, 10%)'
            },
            {
                color: 'hsl(300, 100%, 20%)',
                label: 'hsl(300, 100%, 20%)'
            },
            {
                color: 'hsl(300, 100%, 30%)',
                label: 'hsl(300, 100%, 30%)'
            },
            {
                color: 'hsl(300, 100%, 40%)',
                label: 'hsl(300, 100%, 40%)'
            },
            {
                color: 'hsl(300, 100%, 50%)',
                label: 'hsl(300, 100%, 50%)'
            },
            {
                color: 'hsl(300, 100%, 60%)',
                label: 'hsl(300, 100%, 60%)'
            },
            {
                color: 'hsl(300, 100%, 70%)',
                label: 'hsl(300, 100%, 70%)'
            },
            {
                color: 'hsl(300, 100%, 80%)',
                label: 'hsl(300, 100%, 80%)'
            },
            {
                color: 'hsl(300, 100%, 90%)',
                label: 'hsl(300, 100%, 90%)'
            },
            {
                color: 'hsl(330, 100%, 10%)',
                label: 'hsl(330, 100%, 10%)'
            },
            {
                color: 'hsl(330, 100%, 20%)',
                label: 'hsl(330, 100%, 20%)'
            },
            {
                color: 'hsl(330, 100%, 30%)',
                label: 'hsl(330, 100%, 30%)'
            },
            {
                color: 'hsl(330, 100%, 40%)',
                label: 'hsl(330, 100%, 40%)'
            },
            {
                color: 'hsl(330, 100%, 50%)',
                label: 'hsl(330, 100%, 50%)'
            },
            {
                color: 'hsl(330, 100%, 60%)',
                label: 'hsl(330, 100%, 60%)'
            },
            {
                color: 'hsl(330, 100%, 70%)',
                label: 'hsl(330, 100%, 70%)'
            },
            {
                color: 'hsl(330, 100%, 80%)',
                label: 'hsl(330, 100%, 80%)'
            },
            {
                color: 'hsl(330, 100%, 90%)',
                label: 'hsl(330, 100%, 90%)'
            },
        ],
        columns: 9,
    },
    language: 'zh-cn',
    //设置图片位置以及大小
    image: {
        styles: [
            'alignLeft', 'alignCenter', 'alignRight'
        ],
        resizeOptions: [
            {
                name: 'imageResize:original',
                label: '原版',
                value: null
            },
            {
                name: 'imageResize:50',
                label: '50%',
                value: '50'
            },
            {
                name: 'imageResize:75',
                label: '75%',
                value: '75'
            }
        ],
        toolbar: [
            'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
            '|',
            'imageResize',
            '|',
            'imageTextAlternative'
        ]
    },
    //表格配置
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    //访问许可证密钥
    licenseKey: '',
    //图片上传
    ckfinder: {
      uploadUrl: 'http://192.168.31.123:2000/api/Home/UploadImg'
    },
    //自定义providers,给上传的视频链接设置相应的html，让其可以正常在富文本编辑器中显示
    mediaEmbed: {
        providers: [
            {
                name: 'myprovider',
                url: [
                    /^lizzy.*\.com.*\/media\/(\w+)/,
                    /^www\.lizzy.*/,
                    /^.*/
                ],
                html: match => {
                    //获取媒体url
                    const input = match['input'];
                    return (
                        '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
                            '<video controls="controls" autoplay name="media" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">'+
                                `<source src="${input}" type="video/mp4">`+
                            '</video>'+
                        '</div>'
                    );
                }
            }
        ]
    },
    //自定义字体
    fontFamily: {
        options: [
            'default',
            'Blackoak Std',
            '宋体,SimSun',
            '新宋体,NSimSun',
            '黑体,SimHei',
            '微软雅黑,Microsoft YaHei',
            '楷体_GB2312,KaiTi_GB2312',
            '隶书,LiSu',
            '幼园,YouYuan',
            '华文细黑,STXihei',
            '细明体,MingLiU',
            '新细明体,PMingLiU'
        ]
    },
}
//初始化编辑器实例1
ClassicEditor
    .create( document.querySelector( '#editor' ), config)
    .then( editor => {
        window.editor = editor;
    } )
    .catch( error => {

    } );
//初始化编辑器实例2
ClassicEditor
    .create( document.querySelector( '#editor2' ), config)
    .then( editor => {
        window.editor2 = editor;
    } )
    .catch( error => {

    } );

window.onload = function(){
    document.getElementById("btn").onclick = function(){
        //获取内容数据，以及给获取的内容数据中的oembed替换成video
        window.str = window.editor.getData().replace(/oembed url/g,'video controls src').replace(/oembed/g,'video')
        console.log(window.str);
    }
    //给编辑器插入内容
    document.getElementById("btn2").onclick = function(){
        // //初始化编辑器中的数据;
        window.editor.setData('')
        //对插入的内容进行转换,将video标签转换为oembed标签
        var newContent = window.str.replace(/<video controls src=/g,'<oembed url=').replace(/<\/\video>/g,'<\/\oembed>')
        //将数据转换为文档片段
        var viewFragment = window.editor.data.processor.toView( newContent );
        //对转换的数据进行包裹
        var modelFragment = window.editor.data.toModel( viewFragment );
        //插入到编辑器中
        window.editor.model.insertContent( modelFragment );
    }
    document.getElementById("btn3").onclick = function(){
    }
}