CKEditor的引入

ckeditor官方文档地址：CKEditor

npm install [email protected] 将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+'加载完毕！')
});

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

获取编辑器内容

let submitContent = CKEDITOR.instances.editor_result.getData()

关于公式编辑器

1. 公式编辑器依赖于jquery，请保证项目中引入了jquery。
2. 进入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.js中responseImgUrlFlag。 一、不可改变大小的上传 config.extraPlugins = 'easyimage' 二、可改变大小和拖拽 config.extraPlugins = 'easyimage,image2,uploadimage'