ck-editor5是一款非常优秀的富文本编辑器，我爱模板网就在开发中使用到了它。下面是按需生成build文件，引入到vue3的方法：
1、先进入自定义配置界面，选择自己需要的插件，地址在：https://ckeditor.com/ckeditor-5/online-builder/
2、选择自己喜欢的风格，这里我爱模板网选择的是第一个：Classic
3、选择插件，点击add，加入插件，点击remove，移除插件：
这里注意：如果插件上显示“☆PREMIUM”，表示这个插件收费。
4、点击左上角的“next step”，进入调整工具栏界面，点击上面的工具栏的工具，会将此工具加入进去，点击下面的工具，会将此工具移除。还可以拖拽调整顺序。当然，后面下载后，仍然可以在代码中调整工具栏：
5、点击下一步，进入选择语言界面：
6、在点击下一步，就进入编译界面：
点击“start”开始编译，编译完下载即可。如果出现下面的界面，则表示在选择插件的时候，加入了收费插件：
7、下载后的文件如下，其中，build为编译后的文件，最终引入的也是这里面的内容：
8、如果需要重新调整工具栏的位置 - 只需要改变ckeditor.js代码的顺序然后执行npm命令
npm install npm run build
就能重新生成一个新的build文件
9、将build文件放到自己的项目中，这里在main.js中引入的，当然你也可以在vue页面中引入：
10、如果添加了上传图片的功能则需要写一个上传文件的类，创建一个 UploadAdapter.js 文件，代码如下：
/**
* 配合ckeditor编辑器的上传类
* */
export default class UploadAdapter {
// 加载器
#loader;
// 上传的地址
#uploadFileUrl = "";
/** 构造方法 */
constructor(loader) {
this.loader = loader;
}
/** 上传方法 */
upload() {
this.loader.file.then(res => {
console.log(res)
});
}
/** 中止上传过程方法 */
abort() {}
}11、vue文件中使用：
<template>
<div>
<div id="ck-editor"></div>
<button @click="handleClick">获取内容</button>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, toRaw } from 'vue';
import UploadAdapter from './UploadAdapter.js';
export default defineComponent({
setup() {
const state = reactive({});
let editor: any = null;
onMounted(() => {
// 注意：这里的window.Editor，这个Editor名称要和你在下载下来的文件中，src/ckeditor.js导出的名称一致
(window as any).Editor.create(document.getElementById("ck-editor")).then((_editor: any ) => {
_editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
return new UploadAdapter(loader);
};
editor = _editor;
})
})
const handleClick = () => {
console.log(editor.data.get())
}
return {
...toRefs(state),
handleClick,
}
}
});
</script>12、最终效果如下：
