VUE使用ckeditor的方法步骤

在开发网站项目的时候，要用到一个富文本编辑器，都说Tinymce编辑器好用，但是安装了几次，不是语言包的错误，就是皮肤的错误，好不容易解决了，有显示不出来，还布局出问题，折腾了一天多，就果断放弃，使用ckeditor富文本编辑器，十分钟就搞定，没有太多的坑，推荐使用。
具体使用方法：
官网：https://ckeditor.com/ckeditor-5/
1、安装：有四种版本，选择 document
参考：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 id="toolbar-container"></div>

<!-- 编辑器容器 -->
<div id="editor">
<p>This is the initial editor content.</p>
</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)
      })
    },
}

5、获取编辑器的内容

this.editor.getData()

6、进行初始化

this.editor.setData(contentVal)

完整代码：

<template>
  <div class="box">

    <!-- 编辑器 -->
    <div class="ckeditor">
      <!-- 工具栏容器 -->
      <div id="toolbar-container"></div>
      <!-- 编辑器容器 -->
      <div id="editor">
        <p>This is the initial editor content.</p>
      </div>
    </div>
    
    <button @click="getHtml">获取内容</button>
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'

export default {
  data() {
    return {
      editor:null,//编辑器实例
    }
  },
  mounted() {
    this.initCKEditor()
  },
  methods: {
    initCKEditor(){
      CKEditor.create(document.querySelector("#editor"),{
        language: 'zh-cn',
        ckfinder:{
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
          uploadUrl:'',
        }
      }).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container');
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        this.editor = editor;
      }).catch(error => {});
    },
    /*获取编辑器内容*/
    getHtml(){
      console.log(this.editor.getData());
    },
  }
}

</script>

<style>
.ckeditor{width: 80%; margin: 30px auto 0px; border:1px solid #ddd;}
</style>

参考：https://blog.csdn.net/wangxiuyan0228/article/details/83378416