富文本编辑ckeditor5+vue3的使用记录

taoyueneng

于 2024-05-14 09:37:42 发布

阅读量831

点赞数 16

文章标签： vue.js javascript typescript

本文链接：https://blog.csdn.net/taoyueneng/article/details/138837641

版权

之所以在这里记录，是因为自己不细心走了很多弯路，希望和我一样不细心的朋友少走些弯路，文章还有很多不足的地方，但重在记录：

官方针对vue3的文档地址: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html

1. 最简单的使用

1.1 获取组件

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

1.2 全局挂载

    import { createApp } from 'vue'
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import App from './App.vue'

    const app = createApp(App)

    app.use( CKEditor );

    app.mount('#app')

1.3 页面使用

html

<template>
    <div >
        <ckeditor :editor="editor" v-model="data" :config="conf"></ckeditor>
    </div>
</template>

script

<script lang="ts" setup>
    
import { ref } from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const editor=ref(ClassicEditor)
const data=ref('<span>随便填些内容</span>')
const conf=ref({
        language: 'zh-cn',
        // plugins: [
        
        // ],
        toolbar: {
            items: [
            'undo',
            'redo',
            '|',
            'bold',
            'italic',
            'strikethrough',
            'subscript',
            'superscript',
            'link',
            ]
        }
  })
</script>

以上是最简的使用，但很多功能都没有，比如：字体家族【fontFamily、fontColor、fontBackgroundColor、fontSize】，高亮，对齐方式等等，因为该组件是以定制的形式提供的，当然，官方也还有构建好可以直接使用的其他文件，比如：https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#document-editor

2. 更加丰富的功能

2.1 直接通过官方提供的在线构建，可以任意添加自己想要的功能

注：也可以自己拉取源码进行构建，请参考：Vue3项目集成CKEditor富文本编辑器，支持代码语法高亮显示：https://blog.csdn.net/heshengfu1211/article/details/136582947

在线构建网址：https://ckeditor.com/ckeditor-5/online-builder/
随便选择一个，然后下一步
在这里插入图片描述

进行添加或移除功能，后一步一步往下走
在这里插入图片描述

…
然后将构建好的文件下载下来，并且解压出来，结构如下：
在这里插入图片描述

2.2 使用

使用的方法很多，比如作为本地包导入，请参考：Vue3中快速简单使用CKEditor 5富文本编辑器:https://blog.csdn.net/qq_43775179/article/details/131980633

当然，我更喜欢下面两种方案：

2.2.1 直接使用构建好的文件

在项目下建一个文件夹，比如就叫 ckeditor
将build下的 ckeditor.js 和 ckeditor.js.map 文件复制到新建的目录下

接下来继续在该文件夹下添加index.ts文件,内容如下

    import './ckeditor.js'
    export default window['ClassicEditor']

继续获取@ckeditor/ckeditor5-vue

    npm install --save @ckeditor/ckeditor5-vue

全局挂载

    import { createApp } from 'vue'
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import App from './App.vue'

    const app = createApp(App)

    app.use( CKEditor );

    app.mount('#app')

页面使用
html

<template>
    <div >
        <ckeditor :editor="editor" v-model="data" :config="conf"></ckeditor>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import myEditor from '@/ckeditor';//注意这里的@是路径配置，根据实际情况写

const editor=ref(myEditor)
const data=ref('<span>随便填些内容</span>')
const conf=ref({
        //language: 'zh-cn',
        // plugins: [

        // ],
        // toolbar: {
        //     items: [
        //     'undo',
        //     'redo',
        //     ]
        // }
  })
</script>

这种方案的好处，使用超级简单，而且不用去额外获取插件包，因为都在构建文件里了，缺点是要加减插件比较麻烦，必须去重新构建一遍

2.2.2 使用src下的ckeditor.ts文件及package.json里的依赖

首先，同样在项目下新建一个文件夹，名字随便，比如就叫 ckeditor-classic
然后将解压出来包下的src下的ts文件复制到该目录下
接下来继续将解压出来包下的package.json里关于@ckeditor的依赖全部复制到自己项目的package.json里
在这里插入图片描述

接着拉取 @ckeditor/ckeditor5-vue

    npm install --save @ckeditor/ckeditor5-vue

接下相对重要的就是整合插件管理
vite：

npm install --save @ckeditor/vite-plugin-ckeditor5

编辑 vite.config.js 或者 vite.config.ts,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig( {
  plugins: [
    vue(),
    ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
  ],
  resolve: {
    alias: {
      '@': fileURLToPath( new URL( './src', import.meta.url ) )
    }
  }
} );

如果遇到错误：【require.resolve 不是函数】的情况，请在vite.config.js 或者 vite.config.ts里加入下面的内容：

import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );

如果使用Webpack的话，请参照官网说明https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html 的Webpack部分

接下来就和之前差不多了

全局挂载

    import { createApp } from 'vue'
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import App from './App.vue'

    const app = createApp(App)

    app.use( CKEditor );

    app.mount('#app')

页面使用
html

<template>
    <div >
        <ckeditor :editor="editor" v-model="data" :config="conf"></ckeditor>
    </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue'

//import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
//import myEditor from '@/ckeditor';//注意这里的@是路径配置，根据实际情况写
import ClassicEditor from '@/ckeditor-classic/ckeditor';

//const editor=ref(ClassicEditor)
//const editor=ref(myEditor)
const editor=ref(ClassicEditor)
const data=ref('<span>随便填些内容</span>')
const conf=ref({
        //language: 'zh-cn',
        // plugins: [

        // ],
        // toolbar: {
        //     items: [
        //     'undo',
        //     'redo',
        //     ]
        // }
  })
</script>

这种做法相对前一种的好处是一旦整理好，后面要加减插件就容易，直接npm拉取想要的插件，然后在【ckeditor-classic/ckeditor.ts】文件里加入对应的插件即可，比如加入【查找和替换插件】

npm i  @ckeditor/ckeditor5-find-and-replace -save

编辑ckeditor-classic/ckeditor.ts 内容，“…”表示原有的内容

//...............
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
//.................

class Editor extends ClassicEditor {
	public static override builtinPlugins = [
		//.................
		FindAndReplace,
		//..................
	];
public static override defaultConfig: EditorConfig = {
		toolbar: {
			items: [
				//...................
				'findAndReplace',
				//....................
			]
		},
        //.................
}
//................

这就是这种方案的好处，比较自由，但相对前一种，缺点就是一旦重新拉取依赖，那关于ckeditor的所有插件都必须拉取一次，再有就是整合时相对复杂那么一点点。

语言配置

接下来再补充一点关于语言问题
如果使用第一种方案【直接使用构建好的文件】的话，那直接将【build】下的【translations】及里面的内容【也可以只复制自己想要的语言文件】到自己的【ckeditor】目录下
然后使用时直接导入对应语言文件然后加入配置即可，如：

    //....................
    import './translations/zh-cn'
    //....................
    const conf=ref({
            language: 'zh-cn',
            // plugins: [

            // ],
            // toolbar: {
            //     items: [
            //     'undo',
            //     'redo',
            //     ]
            // }
    })

如果使用方案二话，由于语言文件是根据构建时选用的插件生成的【具体请参照官方说明https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html 的Localization部分】，所以自由扩展插件不能使用原来【build】下的【translations】里的内容，因为不全面
这里我建议最简单的办法就是通过在线构建时把能加的插件都加上，然后下载下来，取出【build】下的【translations】及里面的内容，这样语言文件就比较全面，使用和方案一完全一样

下面是我自己觉得比较适用的插件

      npm i -save  @ckeditor/ckeditor5-font  #字体家族【fontFamily、fontColor、fontBackgroundColor、fontSize】等
      npm i -save  @ckeditor/ckeditor5-highlight  #高亮
      npm i -save  @ckeditor/ckeditor5-horizontal-line #水平线
      npm i -save  @ckeditor/ckeditor5-word-count #字数统计
      npm i -save  @ckeditor/ckeditor5-alignment  #对齐方式
      npm i -save  @ckeditor/ckeditor5-find-and-replace #查找和替换

Color、fontSize】等
npm i -save @ckeditor/ckeditor5-highlight #高亮
npm i -save @ckeditor/ckeditor5-horizontal-line #水平线
npm i -save @ckeditor/ckeditor5-word-count #字数统计
npm i -save @ckeditor/ckeditor5-alignment #对齐方式
npm i -save @ckeditor/ckeditor5-find-and-replace #查找和替换