环境

"vue": "^3.2.37"

"vite": "^3.0.1"

"ckeditor": "^38.1.1"

使用流程

简单使用

官方给我们提供了几种预设好的使用方式,

使用这些方式可以快速的使用editor, 下面以在vue3中使用Classic editor为例:

安装依赖

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

使用

由于我并不想全局加载, 所以这里我直接在组件内引入了ckeditor5-vue, 需要注意的是组件引入后使用的是CKEditor.component

<script setup>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import { onMounted, ref } from "vue";
const ckeditor = CKEditor.component;
onMounted(() => {});

const editor = ClassicEditor;
const editorData = ref("asd");

const editorConfig = {};
</script>
<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
  ></ckeditor>
  {{ editorData }}
</template>
<style scoped></style>

此时已经完成了最基本的使用方式

自定义构建功能

有时候我们希望使用一些额外的插件, 在预设的几种使用方式内并没有时, 则可以通过自定义构建方式去使用

构建编辑器

首先使用官方提供的在线构造器去构造想要的功能

CKEditor 5 Online Builder | Create your own editor in 5 steps

这里选择第一个Classic作为演示

这里将框选的收费框架给去掉, 然后添加自己想要的组件(当然也可以后面手动添加)

将下载好的zip包解压, 并且粘贴到vue项目中, 与src同级

ps:这里文件夹我给他重新命名了下, 不影响使用

然后通过npm将包加入到项目中

ps: yarn 同理

npm i ./ckeditor5-38.1.0

此时依赖中会多出来一个本地包依赖

然后就可以使用了

ps: 注意此时的编辑器引用变成了import ClassicEditor from "ckeditor5-custom-build/build/ckeditor"

<script setup>
import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "ckeditor5-custom-build/build/ckeditor";
import { onMounted, ref } from "vue";
const ckeditor = CKEditor.component;
onMounted(() => {});

const editor = ClassicEditor;
const editorData = ref("asd");

const editorConfig = {};
</script>
<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
  ></ckeditor>
  {{ editorData }}
</template>
<style scoped></style>

修改vite配置

optimizeDeps: {
    include: [
      "ckeditor5-custom-build/build/ckeditor",
    ],
  },
  build: {
    commonjsOptions: {
      include: [
        "ckeditor5-custom-build/build/ckeditor",
      ],
    },
  },

ps: 这一步必须得要有否则会报错SyntaxError: The requested module '/ckeditor5-38.1.0/build/ckeditor.js' does not provide an export named 'default'

这个时候就可以正常使用了

如何手动添加插件

进入到ckeditor5-38.1.0中然后npm i
找到对应的插件包npm install --save @ckeditor/ckeditor5-upload
在ckeditor.js中引用import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js";";(这里需要注意, 引入的是js文件, 官网写的有坑)
在Editor.builtinPlugins中添加SimpleUploadAdapter
重新打包npm run build
进入到vue项目中重新安装 npm i ckeditor5-38.1.0

vue中使用ckeditor5流程

环境