CKEditor入門應用

CKEDITOR入門應用

官網：ckeditor.com/ckeditor-4/
下載：ckeditor.com/ckeditor-4/…
三個版本：basic、standrad、full

引入

<script src="/public_static/ckeditor/ckeditor.js"></script>複製代碼

初始化

// dom
<textarea name="editor" id="editor"></textarea>

// 行內 editor是textarea對應的id
CKEDITOR.inline( 'editor' );
// 文檔格式的
CKEDITOR.replace( 'editor' );複製代碼

數據綁定

// 綁定輸入值
CKEDITOR.instances.editor.setData(htmlStr); 
// vue中能夠使用v-model綁定編輯器內容
<textarea name="editor" id="editor" v-model="editorContent"></textarea>
this.editorContent = 'This is a test message!'

// 獲取編輯器內容值
CKEDITOR.instances.editor.getData();
複製代碼

配置

import toolbar from '../toobarConfig';

// 1. 指定dom時添加配置 IN-PAGE
this.editor = CKEDITOR.replace('editor', {
     height: 300,
     toolbar,  // 工具條佈局

     // 插件引入與移除
     extraPlugins: 'print,format,font,colorbutton,justify,dcard,simage,imagepaste',
     // 移除編輯器底部狀態欄顯示的元素路徑和調整編輯器大小的按鈕
    removePlugins: 'elementspath,resize,magicline',
    
    // 內容過濾
    allowedContent: 'p b i; a[!href]', // 容許的標籤
    extraAllowedContent: 'h3{clear};h2{line-height};h2 h3{margin-left,margin-top}',
    removeDialogTabs: 'image:advanced;link:advanced',
    // bodyClass,bodyId,
    
    customConfig: './config/editorConfig.js' // 2. 指定配置文件
});

// 3.使用API CKEDITOR.editorConfig, 
// 默認的creditor.js 同級config.js文件（使用方法2API） defaultConfig

複製代碼

// 優先級
IN_PAGE > customConfig > defaultConfig

工具條佈局

// 逐項配置
config.toolbar = [{
    name: 'styles', // 組名
    items: ['Format', 'Font', 'FontSize'] // 操做項
},
// ......
]

// 分組配置
config.toolbarGroups = [
    { name: 'styles' },
    '/', // 強制斷行
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }
]
複製代碼

編輯器樣式指定

// 1.默認樣式文件content.css, ckeditor.js同級目錄
// 2.全局添加
CKEDITOR.addCss('.cke_editable { font-size: 15px; padding: 10px 20px;} ' +
    '.cke_editable > div { margin: 76px !important; width: calc(100% - 152px) !important;}' +
    '');
複製代碼

樣式插件

// 默認指定styles.js文件
// 全局配置
CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );

// IN-PAGE 添加
this.editor = CKEDITOR.replace('editor', {
     stylesSet: [{ 
         name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } 
         // ...
     }],
     // ...
 })
複製代碼

插件

1） 插件庫：https://ckeditor.com/cke4/addons/plugins/all
2）下載對應插件，放入plugins文件夾下，配置extraPlugins、工具欄

this.editor = CKEDITOR.replace('editor', {
    extraPlugins: 'print,font,colorbutton,justify,simage,lineheight',// 啓用附加的插件
    removePlugins: 'elementspath,resize,', // 禁用插件
    toolbar = [{
        name: 'styles', // 組名
        items: ['Format', 'Font', 'FontSize', 'lineheight'] // 操做項
    }]
})
複製代碼

3）實例文件裏能夠下載自定義工具欄
4）自定義插件

// 項目內部
if (!CKEDITOR.plugins.get('dcard')) {
    CKEDITOR.plugins.add('dcard', {
        init: function (editor) {
            editor.on('paste', self.onDragEnd);
        }
    });
}
// 插件plugins內
CKEDITOR.plugins.add('simage', {
    icons: 'simage',
    allowedContent: 'img[alt,!src,width,height,data-width,data-height]{border-style,border-width,float,height,margin‌​,margin-bottom,margi‌​n-left,margin-right,‌​margin-top,width}',
    init: function (editor) {
        editor.addCommand('simage', {
            exec: function (editor) {
            }
        });

        editor.ui.addButton('SImage', {
            label: '上傳圖片',
            command: 'simage',
            toolbar: 'insert'
        });
    }
});
複製代碼

經常使用API

1）插入節點

var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
editor.insertElement( element );
editor.insertHTML('<p>This is a new paragraph.</p>');
editor.insertText('line1 \n\n line2');
複製代碼

2）選擇器

// Element篩選 param id; return Element
editor.document.getById('test');
 // node選擇器，param selector, return NodeList
element.find(selector);
// 元素篩選 param selector, return Element（first match)
element.findOne(selector)
複製代碼

3）生命週期/事件

CKEDITOR.on('instanceReady', listener1); // 編輯器實例初始化完成
this.editor.on('change', listener2); // 編輯器內容變化
this.editor.on('insertHtml', listener3); // 插入元素，insertElement等同

this.editor.removeAllListeners();
this.editor.destroy();
複製代碼

4）插件

simage：圖片上傳
dcard：拖拽標籤
mentions: 智能提示

let editor = CKEDITOR.replace('editor', {
    function dataFeed(opts, callback) {
      let matchProperty = 'name',
        data = templateParams.filter(function (item) {
          return item[matchProperty].indexOf(opts.query.toLowerCase()) == 0;
        });
    
      data = data.sort(function (a, b) {
        return a[matchProperty].localeCompare(b[matchProperty], undefined, {
          sensitivity: 'accent'
        });
      });
      callback(data);
    }
  // ... 
  mentions: [{
    feed: dataFeed,
    marker: '【',
    minChars: 0,
    itemTemplate: '<li data-id="{id}">' +
      '<strong class="name">{name}】</strong>' +
      '<span class="desc"> |&nbsp; {desc}</span>' +
      '</li>',
    outputTemplate: `${PARAM_GAP}<a>{name}】</a>${PARAM_GAP}`, // 多加入span標籤用於分割參數與文本
  }]
});
複製代碼

在線構建器：ckeditor.com/cke4/builde…