VUE3 引入富文本插件 CKEditor5

最新推荐文章于 2025-03-30 16:11:14 发布

青渺乘槎

最新推荐文章于 2025-03-30 16:11:14 发布

阅读量5.3k

点赞数 2

分类专栏： vue 前端功能文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ParkChanyelo/article/details/130008905

版权

前端功能同时被 2 个专栏收录

24 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

1.插件选型：

vue3的可选择的富文本插件很多，这次的业务需求只是简单的文字加粗，换行等，不需要图片文件等的功能，所以我暂且需要的是简单的富文本编辑器，

查找一些资料，最后选择的CKEditor5，选它是因为它开源，可免费使用到商业用途。之前尝试了tinymce，但是公司不打算申请apikey，所以alert提示框的问题解决不了……具体见文末。

这里有一篇关于富文本编辑器的介绍：

vue3可使用的7款富文本编辑器

2.引入流程：

官网地址：Vue.js 3+ component - CKEditor 5 Documentation

1.下载

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

下载后查看下载的版本号是否一致：

package.json

 "@ckeditor/ckeditor5-build-classic": "^37.0.1",
 "@ckeditor/ckeditor5-vue": "^4.0.1",

2.全局引入

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from './router'

//其他引入
import CKEditor from '@ckeditor/ckeditor5-vue';
app.use(router).use(CKEditor).mount('#app')

官网也有其他引入方法，我这里选择了我熟悉的引入，可以参考官网提及的最直接的一种方式。

有时间我会尝试那种。

3.页面使用

接下来就是页面使用，我需要在一个编辑弹窗里展示富文本编辑器。

官网给的例子是这样的：

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

按照官网的例子，我用的vue3的语法糖，所以有些不一样，但是总体跟官网的示例一样。

我的代码如下：

<template>
    <div id="app">
        <ckeditor v-model="app_message" :editor="editor" :config="editorConfig"></ckeditor>
    </div>

</tempalte>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editor = ClassicEditor

const editorConfig = reactive({})
let app_message = ref('<p>eeee</p>3333333<br/>sssssss')

</script>