vue3使用ck-editor5，亲测可用_前端框架_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

vue3使用ck-editor5，亲测可用

来源：作者：woaimoban 类型：图文教程点击次数：发布时间：2023-05-05 14:46:17

ck-editor5是一款非常优秀的富文本编辑器，我爱模板网就在开发中使用到了它。下面是按需生成build文件，引入到vue3的方法：

1、先进入自定义配置界面，选择自己需要的插件，地址在：https://ckeditor.com/ckeditor-5/online-builder/

2、选择自己喜欢的风格，这里我爱模板网选择的是第一个：Classic

ck-editor5

3、选择插件，点击add，加入插件，点击remove，移除插件：

ck-editor5

这里注意：如果插件上显示“☆PREMIUM”，表示这个插件收费。

4、点击左上角的“next step”，进入调整工具栏界面，点击上面的工具栏的工具，会将此工具加入进去，点击下面的工具，会将此工具移除。还可以拖拽调整顺序。当然，后面下载后，仍然可以在代码中调整工具栏：

ck-editor5

5、点击下一步，进入选择语言界面：

ck-editor5

6、在点击下一步，就进入编译界面：

ck-editor5

点击“start”开始编译，编译完下载即可。如果出现下面的界面，则表示在选择插件的时候，加入了收费插件：

ck-editor5

7、下载后的文件如下，其中，build为编译后的文件，最终引入的也是这里面的内容：

ck-editor5

8、如果需要重新调整工具栏的位置 - 只需要改变ckeditor.js代码的顺序然后执行npm命令

`1`	`npm` `install`

`2`	`npm run build`

就能重新生成一个新的build文件

ck-editor5

9、将build文件放到自己的项目中，这里在main.js中引入的，当然你也可以在vue页面中引入：

ck-editor5

10、如果添加了上传图片的功能则需要写一个上传文件的类，创建一个 UploadAdapter.js 文件，代码如下：

01/**
02 * 配合ckeditor编辑器的上传类
03 * */
04export default class UploadAdapter {
05  // 加载器
06  #loader;
07  // 上传的地址
08  #uploadFileUrl = "";
09  
10  /** 构造方法 */
11  constructor(loader) {
12    this.loader = loader;
13  }
14  
15  /** 上传方法 */
16  upload() {
17    this.loader.file.then(res => {
18      console.log(res)
19    });
20  }
21  
22  /** 中止上传过程方法 */
23  abort() {}
24}

11、vue文件中使用：

01<template>
02  <div>
03    <div id="ck-editor"></div>
04  
05    <button @click="handleClick">获取内容</button>
06  </div>
07</template>
08  
09<script>
10import { defineComponent, reactive, toRefs, onMounted, toRaw } from 'vue';
11import UploadAdapter from './UploadAdapter.js';
12export default defineComponent({
13  setup() {
14    const state = reactive({});
15    let editor: any = null;
16  
17    onMounted(() => {
18      // 注意：这里的window.Editor，这个Editor名称要和你在下载下来的文件中，src/ckeditor.js导出的名称一致
19      (window as any).Editor.create(document.getElementById("ck-editor")).then((_editor: any ) => {
20        _editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
21          return new UploadAdapter(loader);
22        };
23        editor = _editor;
24      })
25    })
26  
27    const handleClick = () => {
28      console.log(editor.data.get())
29    }
30    return {
31      ...toRefs(state),
32      handleClick,
33    }
34  }
35});
36</script>

12、最终效果如下：

ck-editor5