CKEditor的引入

ckeditor官方文档地址：CKEditor

npm install xes-editor@1.0.1 将ckeditor文件夹加入到项目中。
!!! 因为ckeditor.js没有export，是直接挂载在window上的，所以在vue项目中使用import CKEDITOR from 'XXX'是不可以的，建议在index.html中使用<script>直接引入。
<script src="./static/ckeditor/ckeditor.js"></script>

在vue项目中的使用

<div id="editor_result" class="editor_result_box" contenteditable="true"> </div>
在mounted中进行初始化：
CKEDITOR.replace('editor_result'); // 工具栏常驻
CKEDITOR.inline('editor_result'); // 编辑框获取焦点时出现工具栏

配置（config.js）

config.removeButtons=""; // ckedito自带的功能按钮，它是分组添加的，比如insert是一个组，里面有很多功能，可以在这移除不需要的功能
config.extraPlugins=""; // 需要使用自实现的插件列表
config.allowedContent=true; // HTML elements, attributes, styles, and classes are allowed

显示服务端返回内容

所有的设置内容需要在ckeditor初始化完成后进行，使用以下方法来判断初始化完毕。

CKEDITOR.on('instanceReady', function (e) {
      alert(e.editor.name+'加载完毕！')
});

如果需要显示公式，设置内容调用insertData()，会将latex解析成公式。
setData(), insertData(), insertHtml()都可以插入数据，但insert是追加，set是清空在设置。

获取编辑器内容

let submitContent = CKEDITOR.instances.editor_result.getData()
submitContent = this.submitContent.replace(/\\\(/g, '$$$') // ckeditor以 \(\) 为公式识别符，替换为$$ $$
submitContent = this.submitContent.replace(/\\\)/g, '$$$')

关于公式编辑器

公式编辑器依赖于jquery，请保证项目中引入了jquery。
进入ckeditor/plugins/mathjax/plugin.js中，修改mathJax的引用地址
b.config.mathJaxLib='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML';

关于图片上传

在config.js中配置上传url和参数(otherParams)
图片上传要求后端返回数据格式为data中直接是图片的url。如果不是，请修改源码。

data:"https://xesfile.xesimg.com/mathJax/sprite.png"
errmsg:""
stat:1

一、不可改变大小的上传
config.extraPlugins = 'easyimage'
二、可改变大小和拖拽
config.extraPlugins = 'easyimage,image2,uploadimage'

xes-editor使用指南