VUE3 引入富文本插件 CKEditor5

VUE3 引入富文本插件 CKEditor5

目录

1.插件选型:

2.引入流程:

1.下载

2.全局引入

3.页面使用

3.问题报错解决:

4.关于TinyMce:


1.插件选型:

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

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


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

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

2.引入流程:

官网地址:Vue.js 3+ ***ponent - 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, ***puted, 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>

3.问题报错解决:

通常引入库都会报错之类的,但是这次我未遇到报错,很幸运!

这里有一篇用ts写法引入的文章,记录一下,以防不时之需:

vue3使用CKEditor5(typescript版)

只是,关于图片、视频、上传,表格等,还不能使用,因为需求是暂且不需要这几个功能,所以我需要先隐藏。

官网的配置页:Interface EditorConfig (core/editor/editorconfig~EditorConfig) - CKEditor 5 API docs

Editor toolbar - CKEditor 5 Documentation

以下是配置。


4.关于TinyMce:

地址在这:TinyMCE Vue.js integration technical reference | TinyMCE Documentation

 引入这个后实现的效果如下:

功能很强大,但是很多我并不需要。

而且 引入后一直有一个提示框,是因为么有申请apikey。查了解决办法解决不了。

这里发现两个解决这个问题的方案:

Element-UI中调用tinymce6实现本地化加载,并解决提示:This domain is not registered with TinyMCE Cloud,省去api-keyhttp://t.csdn.***/7twK6还有一个是用于解决这个问题的工具:

minimce - npmRich text editor, offline TinyMCE Vue 2.6/2.7/3 wrapper.. Latest version: 0.8.3, last published: 3 months ago. Start using minimce in your project by running `npm i minimce`. There are no other projects in the npm registry using minimce.https://www.npmjs.***/package/minimce以上两个作为记录!

转载请说明出处内容投诉
CSS教程_站长资源网 » VUE3 引入富文本插件 CKEditor5

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买