富文本编辑器 CKEditor5 集成到自己的VUE项目里

最新推荐文章于 2024-08-29 10:37:58 发布

奕尧软件

最新推荐文章于 2024-08-29 10:37:58 发布

阅读量1.1k

点赞数 9

文章标签： javascript 开发语言 typescript vue.js

本文链接：https://blog.csdn.net/weixin_42606057/article/details/138619944

版权

集成方式

如果你跟我一样，在做vite构建的项目，那就集成来自在线构建器的构建方式。

而不是从源码构建，因为这种方式CKEditor官方对vite支持不太友好，bug频发，就别瞎折腾了，我是折腾过的...一言难尽...

→富文本编辑器CKEditor

CKEditor 5就是内嵌在网页中的一个富文本编辑器工具
CKEditor 5开发文档（英文）：CKEditor 5 documentation

第一步：在线构建，定制好各种插件

到官网定制插件

官网定制

上面的目录结构，就是从CKEditor官网定制得到的，

第二步：开始配置

接下来，把这个文件夹，放到我们自己的项目的根目录中，这里文件夹起名为：ckeditor5，

随便什么名字都行，后面用的时候别写错了

我们需要两个依赖，上面这个，就是本地依赖了，在package.json中配置上：

"ckeditor5-custom-build": "file:ckeditor5"

key：起个名字就行。value：根目录里刚才放的文件夹名字

第二个依赖：

npm install @ckeditor/ckeditor5-vue

配置main.ts

import CkEditor from '@ckeditor/ckeditor5-vue'

app.use(CkEditor)

配置vite.config.ts

export default defineConfig({
  build: {
    commonjsOptions: {  
      exclude: ['ckeditor5-custom-build','ckeditor5/*'],
      include: []//这一行，如果是vite2.4版本，可以不加。到2.6就需要加上了
    },
  },
  optimizeDeps: {
    include: ['ckeditor5-custom-build/build/ckeditor'],
  },
  plugins: [
  ],
})

使用

新建一个vue文件，就能用了

<template>
    <ckeditor :editor="Editor" v-model="state.editorData" :config="state.editorConfig"></ckeditor>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
//导入自定义的pinia store
// import { useYiyaoStore } from '../pinia/yiyao.ts'
//导入解构方法
// import { storeToRefs } from 'pinia';
import  Editor  from 'ckeditor5-custom-build/build/ckeditor';

const state = reactive({
  editor: Editor,
  editorData: "<p>Content of the editor.</p>",
  editorConfig: {
    // The configuration of the editor.
  },
});

</script>

<style scoped>

</style>