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…