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(){
    }
}