1.插件选型：

2.引入流程：

1.下载

2.全局引入

3.页面使用

3.问题报错解决：

4.关于TinyMce：

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 = ClassicEditorconst 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.cn/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.com/package/minimce以上两个作为记录！

VUE3 引入富文本插件 CKEditor5相关推荐

quill-editor 富文本插件（含全部全部工具栏）
quill-editor 富文本插件使用一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill- ...
超易上手的富文本插件wangEditor for vue2
前言我们在项目中经常接触的富文本插件有很多应用方案,我常用的有quill-editor.tiptap.wangEditor.先简单介绍下区别: quill-editor:用的最多的插件,但是已经不在 ...
pagination分页、jedate日期、wangEditor富文本插件使用总结
插件的使用 1. 导包 2. 写HTML结构 3. 初始化 pagination分页插件官方文档:http://josecebe.github.io/twbs-pagination/ Demo: 1 ...
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
富文本编辑器 ck-editor5 的使用
最近在项目中需要用到富文本编辑器,据说ck-editor5很不错,于是就使用它了,不过在期间也遇到了很多问题,这里记录下. 一.引入ck-editor5 文档地址:Predefined builds ...
vue 引入富文本编辑器（巨简单）
官方文档开始使用 · wangEditor 用户文档https://www.wangeditor.com/doc/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94 ...
富文本插件和回显 vue-quill-editor
在开发过程中,input的限制会越来越明显.这时富文本输入框就派上用场了. 推荐使用这个插件 vue-quill-editor 插件的使用方法和自定义组件的使用方法一样第一步: 安装插件 npm i ...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
微信小程序富文本插件
一.简介及说明在小程序项目开发中,会遇到富文本编辑的内容,后台返回到小程序端无法解析,这时就需要一个插件来处理. 微信小程序没有提供webview等html解析,原展示类文本没有办法图文并茂的原生展 ...

VUE3 引入富文本插件 CKEditor5

1.插件选型：

2.引入流程：

1.下载

2.全局引入

3.页面使用

3.问题报错解决：

4.关于TinyMce：

VUE3 引入富文本插件 CKEditor5相关推荐

最新文章

热门文章