xes-editor

富文本编辑器

Usage no npm install needed!

<script type="module">
  import xesEditor from 'https://cdn.skypack.dev/xes-editor';
</script>

README

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项目中的使用

`

` 在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'