vue中的富文本编辑器CKEditor5

为什么选这个编辑器，因为颜值！
官网 https://ckeditor.com/ckeditor-5/

image.png

1、安装
官网已经四种版本，也给出了下载安装的方法，参考官网安装
https://ckeditor.com/ckeditor-5/download/
2、引用
在组件中引用

import CKEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' //中文包

3、html

 <div class="goods-editor">
        <!-- 工具栏容器 -->
        <div id="toolbar-container"></div>

        <!-- 编辑器容器 -->
        <div id="editor">
          <!-- <p>This is the initial editor content.</p> -->
        </div>
      </div>

4、方法
因为图片要上传到我们的服务器，要重置一下上传路径，方法如下

export default {
  data() {
    return {
      editor: null, // 编辑器实例
    }
  },
  mounted() {
    this.initCKEditor()
  },
  methods: {
    initCKEditor() {
      class UploadAdapter {
        constructor(loader) {
          this.loader = loader
        }
        upload() {  //重置上传路径
          return new Promise((resolve, reject) => {
            var fileName = 'goods' + this.loader.file.lastModified
            client().put(fileName, this.loader.file).then(result => {
              resolve({
                default: result.url
              })
            }).catch(err => {
              console.log(err)
            })
          })
        }
        abort() {
        }
      }
     //初始化编辑器
      CKEditor.create(document.querySelector('#editor'), {
        removePlugins: ['MediaEmbed'], //除去视频按钮
        language: 'zh-cn',  // 中文
        ckfinder: {
          'uploaded': 1, 'url': '/'
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        }
      }).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container')
        toolbarContainer.appendChild(editor.ui.view.toolbar.element)
        // 加载了适配器
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
          return new UploadAdapter(loader)
        }
        this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
      }).catch(error => {
        console.error(error)
      })
    },
}

4、获得编辑器中的数据

this.editor.getData()

5、初始化编辑器中的数据

this.editor.setData(contentVal)

6、编辑器只读

this.editor.isReadOnly = true; //将编辑器设为只读

网友补充，如果在上传之前需要做限制，参考如下：（感谢网友的分享）

class MyUploadAdapter {
constructor(loader) {
self.loader = loader;
self.oldValue = self.editor.getData();//保存原来的内容
}

upload() {
return new Promise((resolve, reject) => {
let size = self.loader.file.size;
if (size / 1024 > 2048) {
self.$message({
message: '图片不能大于2M'
});
self.editor.setData(self.oldValue);
return false;
}
const data = new FormData();
data.append('imageFile', self.loader.file);
self.fullscreenLoading = true;
self.$http.post('/editor/uploadImg', data).then(res => {
self.fullscreenLoading = false;
if (res) {
if (res.data.code == 200) {
resolve({
default: res.data.data
});
} else {
self.$message({
message: res.data.msg
});
self.editor.setData(self.oldValue);
}
} else {
self.$message({
message: 'can not upload file: ' + self.loader.file.name
});
self.editor.setData(self.oldValue);
}
})
}).catch(error => {
console.log(error);
});
}

abort() {
}
}

vue中的富文本编辑器CKEditor5

推荐阅读更多精彩内容