阅读 327
记一次 ckeditor4-vue 使用

记一次 ckeditor4-vue 使用

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。所以富文本便器会是如下的功能: image.png 具体介绍可自取官方: ckeditor.com/docs/ckedit…

上传图片

editorConfig 配置

  • 定义上传插件 extraPlugins: 'uploadimage',

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

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

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

    • 获取到ready抛出来方法
    • onEditorReadyconst editor = this.$refs.ckeditor.instance 获取到该ckeditor实例
    • editor 注册 fileUploadRequestfileUploadResponse

    代码如下:
    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',
    复制代码

    效果如下: image.png

    editor-url的文档: ckeditor.com/docs/ckedit…
    不同包的对比: ckeditor.com/cke4/preset…
    不同包的cdn地址: cdn.ckeditor.com/

  • toolbar设置
    这里我是采用下载全包然后通过页面设置来获取配置项做设置

    • 首先下载Full Package 包 image.png
    • 解压包 打开 /samples/index.html 按照下面截图完成配置 image.png image.png

如有错误,敬请指正~

文章分类
前端
文章标签