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'); // 編輯框獲取焦點時出現(xiàn)工具欄
配置（config.js）
config.removeButtons=""; // ckedito自帶的功能按鈕，它是分組添加的厕怜，比如insert是一個組衩匣，里面有很多功能，可以在這移除不需要的功能
config.extraPlugins=""; // 需要使用自實現(xiàn)的插件列表
config.allowedContent=true; // HTML elements, attributes, styles, and classes are allowed
顯示服務(wù)端返回內(nèi)容
所有的設(shè)置內(nèi)容需要在ckeditor初始化完成后進行粥航，使用以下方法來判斷初始化完畢琅捏。
CKEDITOR.on('instanceReady', function (e) {
alert(e.editor.name+'加載完畢！')
});
- 如果需要顯示公式递雀，設(shè)置內(nèi)容調(diào)用
insertData()柄延，會將latex解析成公式。 -
setData(), insertData(), insertHtml()都可以插入數(shù)據(jù)映之，但insert是追加拦焚，set是清空在設(shè)置。
獲取編輯器內(nèi)容
let submitContent = CKEDITOR.instances.editor_result.getData()
submitContent = this.submitContent.replace(/\\\(/g, '$$$') // ckeditor以 \(\) 為公式識別符杠输，替換為$$ $$
submitContent = this.submitContent.replace(/\\\)/g, '$$$')
關(guān)于公式編輯器
- 公式編輯器依賴于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';
關(guān)于圖片上傳
在config.js中配置上傳url和參數(shù)(otherParams)
圖片上傳要求后端返回數(shù)據(jù)格式為data中直接是圖片的url僵刮。如果不是，請修改源碼。
data:"https://xesfile.xesimg.com/mathJax/sprite.png"
errmsg:""
stat:1
一搞糕、不可改變大小的上傳
config.extraPlugins = 'easyimage'
二勇吊、可改變大小和拖拽
config.extraPlugins = 'easyimage,image2,uploadimage'
