vue2.x使用ckeditor4（上传图片使用element-ui）

1.到官网下载ckeditor（full-.zip）
https://ckeditor.com/ckeditor-4/download/

2.解压后的文件放在Vue项目的static目录下

cke1.png

3.新建一个ckeditor组件，组件代码在下面

自定义按钮
在plugins文件下新建一个addpic文件夹，里面放一张图片和plugin.js文件

cke2.png

在plugin.js

(function () {
  CKEDITOR.plugins.add( 'addpic', {
    init: function( editor ) {
      editor.addCommand( 'insertTimestamp', {
        exec: function(editor) {
          document.querySelector("#FuploadImg input").click();/*这里自定义的上传按钮，使用element-ui上传*/
          // editor.insertHtml( 'The current date and time is: ' + now.toString() + '' );
        }
      });
      editor.ui.addButton( 'addpic', {
        label: '添加图片',
        command: 'insertTimestamp',
        toolbar: 'insert',
        icon:'plugins/addpic/icons/addpic.png'
      });
    }
  });
})();

在config.js里修改，就完成了

cke3.png

config.js

CKEDITOR.editorConfig = function( config ) {
  // Define changes to default configuration here. For example:
  config.language = 'zh-cn';//指定语言，不然有些浏览器会自动检测语言，会报错
  // config.uiColor = '#AADC6E';
  // config.readOnly = false
  config.toolbar = 'Full';
  config.height = 500
  // config.extraPlugins = 'addpic,pasteUploadImage';
  config.allowedContent = true;
  //config.fullPage = true;
  config.extraPlugins = 'addpic';
  config.pasteFilter = null;/*保留粘贴格式*/
  config.toolbar_Full = [
    { name: 'document', items: [ 'Source' ] },
    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ] },
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'CopyFormatting', 'RemoveFormat' ] },
    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
    { name: 'insert', items: [ 'addpic','Table',] },
    '/',
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
  ]
};

组件代码

在页面使用

获取富文本数据

CKEDITOR.instances.富文本id.getData()

设置富文本数据

CKEDITOR.instances.富文本id.setData()

提交数据时过滤富文本的某些标签

let scriptTag =  CKEDITOR.instances.Seditor.getData().replace(//g, ''); /*过滤script标签*/
filterTag = filterTag .replace(/