关于在vue-3 搭建vue项目中使用 CKEditor

vue3使用ckeditor插件基本操作步骤如下：
ckeditor 地址:https://ckeditor.com/
使用方法也很简单
1.下载ck的包，也可以使用npm直接下载，推荐使用ck4
下载地址：https://ckeditor.com/ckeditor-4/download/
（我下载的是Full Package的插件，根据个人的需求下载插件）

2.将下载好的包解压到文件夹
3.将解压好的包放到vue-cli的pubilc中

4.需要在index.html中引入ck的js代码

<script src="ckeditor/ckeditor.js"></script>

5.创建ck 公用模板 ckdeitor.vue (我定义的文件名)

代码如下：

<template>
  <div>
    <textarea :id="id" name="content"></textarea>
  </div>
</template>
<script>
export default {
  props: ["content"],//从父组件转递的内容
  mounted: function() {
    const self = this;
    // 渲染编辑器
    self.ckeditor = window.CKEDITOR.replace('content',{height:'280px'});//定义编辑器的高度
    // 设置初始内容
    self.ckeditor.setData(self.content);

    // 监听内容变更事件
    self.ckeditor.on("change", function() {
      self.$emit("sendContnet", self.ckeditor.getData());
    });
  },
  data: function() {
    return {
      id: parseInt(Math.random() * 10000).toString(),
      ckeditor: null
    };
  },
  watch: {
    // 监听prop的变化，更新ckeditor中的值
    content: function() {
      if (this.content !== this.ckeditor.getData()) {
        this.ckeditor.setData(this.content);
      }
    }
  }
};
</script>
<style scoped>
</style>

6.在需要的地方引入ckeditor.vue插件

代码如下：

<template>
  <div>
    <ckeditor @sendContnet="getContent" :content="infoText"></ckeditor>
  </div>
</template>
<script>
import ckeditor from '../../../../../../../components/ckeditor.vue'
export default {
  components: { ckeditor },
  data() {
    return {
      infoText: ' '
    }
  },
  methods: {
    //获取富文本编译器内容
    getContent(val) {
      this.infoText = val
    }
  }
}
</script>

7.最后效果图