vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）

最近尝试用了vue3进行开发，没想到在使用element-plus框架的时候出现了bug（一个星期后官方修复了），所以我对在项目中集成富文本插件ckeditor5比较忐忑，而且也没有vue3中集成ckeditor5的例子可以借鉴，

注意这篇文档适合有一定vue2.x基础的参考

这里我们先上个ckeditor5官网地址

ckeditor5有很多功能版本

这里我选用了document版

官方提供了三种集成到项目中的方法

这里可以先用npm的方法集成，在后面我们会使用下载包的方式来引入（为了图片大小编辑功能）

集成步骤：

1. 创建一个editBox.vue编辑器组件，写入html部分的代码

<template>
  <!-- 外部容器-->
  <div class="editorBox">
    <!-- 工具栏容器 -->
    <div id="toolbar-container"></div>
    <!-- 编辑器容器 -->
    <div id="editor" ></div>
  </div>
</template>

2. 引入相关依赖（npm引入的话自己调整一下路径，这一步懂得都懂），MyUploadAdapter 是图片自定义上传适配器，后面会讲到

import CKEditor from "./ckeditor5-build-decoupled-document";
import "./ckeditor5-build-decoupled-document/build/translations/zh-cn.js";
import { reactive, onMounted } from "vue";
import MyUploadAdapter from "./uploadImg";

3. 写一个与编辑器处理相关的Effect

const CKEditor_Effect = () => {
  //创建一个编辑器对象数据
  let editorObj = reactive({});
  // 初始化编辑器
  const initCKEditor = () => {
    CKEditor.create(document.querySelector("#editor"), {
      language: "zh-cn",
    })
      .then((editor) => {
        const toolbarContainer = document.querySelector("#toolbar-container");
        toolbarContainer.appendChild(editor.ui.view.toolbar.element);
        editorObj = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
          return new MyUploadAdapter(loader); //自定义上传图片
        };
      })
      .catch((error) => {
        console.error(error);
      });
  };
  // 获取编辑器数据
  const getEditorData = () => {
    return editorObj.getData()
  };
  // 设置编辑器数据
  const setEditorData = (data) => {
    return editorObj.setData(data)
  };
  //在mounted初始化
  onMounted(() => {
    initCKEditor();
  });

  return { editorObj, getEditorData,setEditorData };
};

4. 在setup函数中引用

setup(props, context) {
    const CKEditorEffect = CKEditor_Effect();
    return { ...CKEditorEffect };
  },

5. 编辑器样式自己把握（略）

到这里应该已经成功引入了这个富文本编辑器，需要注意的是，使用富文本编辑器，我们的项目中的reset.css最好不要把相关的标签样式重置，这可能会导致富文本的编辑功能样式被覆盖。

下一篇我们讲自定义图片上传，图片编辑排坑。