ckeditor-vue 使用小计

序言

之前项目使用的是直接下载引入的方式来完成ckeditor4在vue项目中的使用。最新开始做新项目发现 ckeditor官方自己已经提供了vue的封装，所以更新一波

引入

这方便官网已经写得很清楚了不多赘述。可以自取:ckeditor.com/docs/ckedit…
我这采用的是 main.js 直接注册组件，具体页面使用的方式。代码如下：
html:

<ckeditor v-model="editorData" :config="editorConfig" />
复制代码

js:

data() {
    retturn {
        editorData: '',
        editorConfig: {},
    }
}
复制代码

由于默认官方是使用 Standard Package。所以富文本便器会是如下的功能：

具体介绍可自取官方： ckeditor.com/docs/ckedit…

上传图片

`editorConfig` 配置

定义上传插件 extraPlugins: 'uploadimage',
定义上传路径 filebrowserImageUploadUrl: xxx + 'upload', (这个具体写入你的项目的路径)

按照该方法写入上传方法后，直接使用会报错，因为需要后端配合做一些字段的修改。因为ckeditor需要的数据类型为{ "uploaded":1, "url":"图片访问路径"} / {"uploaded":0,"error":{"message":"失败原因" }}
但是我的项目的接口都已经定义过了，所以需要借用其他配置来完成上传功能。如果你可以调整可以取这篇文章试一下：topurl.cn/5Tn

通过ready方法获取到改<ckeditor>实例来添加fileUploadRequest与fileUploadResponse 方法来自定义上传的请求与返回处理方法

获取到ready抛出来方法
onEditorReady 中 const editor = this.$refs.ckeditor.instance 获取到该ckeditor实例
editor 注册 fileUploadRequest与fileUploadResponse

代码如下：
html:

<ckeditor ref="ckeditor" @ready="onEditorReady"/>
复制代码

js:

onEditorReady() {
    const editor = this.$refs.ckeditor.instance
    editor.on('fileUploadRequest', function(evt) {
      const formData = new FormData()
      const fileLoader = evt.data.fileLoader
      const { xhr, uploadUrl, file, fileName } = fileLoader
      xhr.open('post', uploadUrl)
      // 这里可以根据自己需要添加token等其他头信息
      xhr.setRequestHeader('token', getToken())
      formData.append('file', file, fileName)
      xhr.send(formData)
      evt.stop()
    })
    editor.on('fileUploadResponse', function(evt) {
      evt.stop()
      const xhr = evt.data.fileLoader.xhr
      const res = JSON.parse(xhr.responseText)
      // 自己处理返回逻辑
      if (res.ret !== 0) {
        evt.data.message = res.message
        evt.cancel()
      } else {
        evt.data.url = res.data.url
      }
    })
},

复制代码

上述监听方法参考 www.jianshu.com/p/51b60d789…
ckeditor组价抛出方法可以查看 ckeditor.com/docs/ckedit…

添加其他功能

Standard Package 存在的问题

由于官方默认是使用的 Standard Package 导致一些基础的富文本功能无法配置，例如: 字号、字体颜色…
所以需要使用 Full Package 来拓展功能

使用 editor-url 来引入Full Package
html：
```
 <ckeditor :editor-url="editorUrl" />
复制代码
```
js:
```
 editorUrl: 'https://cdn.ckeditor.com/4.16.0/full/ckeditor.js',
复制代码
```
效果如下：

editor-url的文档： ckeditor.com/docs/ckedit…
不同包的对比： ckeditor.com/cke4/preset…
不同包的cdn地址： cdn.ckeditor.com/
toolbar设置
这里我是采用下载全包然后通过页面设置来获取配置项做设置
- 首先下载Full Package 包
- 解压包打开 /samples/index.html 按照下面截图完成配置