1.开发环境 vue
2.电脑系统 windows10专业版
3.在开发的过程中,咱们常常会应用到富文本性能,上面我来分享一下。
4.富文本比拟:

UEditor：百度前端的开源我的项目，功能强大，基于 jQuery，但曾经没有再保护，而且限定了后端代码，批改起来比拟吃力bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...kindEditor：功能强大，代码简洁，须要配置后盾，而且好久没见更新了wangEditor：轻量、简洁、易用，然而降级到 3.x 之后，不便于定制化开发。不过作者很怠惰，狭义上和我是一家人，打个callquill：自身性能不多，不过能够自行扩大，api 也很好懂，如果能看懂英文的话...summernote：没深入研究，UI挺丑陋，也是一款小而美的编辑器，可是我须要大的
在有这么参考的状况下,我最终还是抉择了 tinymce 1. GitHub 上星星很多,性能也齐全;2. 惟一一个从 word 粘贴过去还能放弃绝大部分格局的编辑器;3. 不须要找后端人员扫码改接口，前后端拆散;

5.我应用的版本

6.Vue引入TinyMCE富文本组件时遇到的问题

版本兼容问题因为 @tinymce/tinymce-vue@4.0.0 仅针对Vue@3.x版本，须要降级。

7.装置

npm install @tinymce/tinymce-vue@3 -D
npm install tinymce@5.7.0 -D

8.去官网下载语言包:

(https://www.tiny.cloud/get-tiny/language-packages/)

https://www.tiny.cloud/get-ti...[语言包]

9.下载语言包之后,复制到我的项目中,我放在了assets上面:

10.在对应的.vue文件中应用

//导入// 导入富文本import tinymce from "tinymce/tinymce";import Editor from "@tinymce/tinymce-vue";import "tinymce/skins/ui/oxide/skin.min.css"; //富文本款式import "tinymce/icons/default"; //富文本款式// 配置富文本import "tinymce/themes/silver/theme.min.js"; //引入富文本的次要脚本
//注册components: { Editor },
// template<editor id="tinymce" v-model="tinymceHtml" :init="einit"></editor><div v-html="tinymceHtml"></div>
// return tinymceHtml: "请输出内容",    einit: {        skin_url: require("@/assets/skins/ui/oxide/skin.min.css"),        language_url: require("@/assets/langs/zh_CN.js"),        language: "zh_CN",        height: 300,    },
// mountedtinymce.init({});

11.举例无成果配置:

<editor id="tinymce" v-model="tinymceHtml" :init="einit"></editor><div v-html="tinymceHtml"></div>
tinymceHtml: "请输出内容",einit: {},
tinymce.init({    skin_url: require("@/assets/skins/ui/oxide/skin.min.css"),    language_url: require("@/assets/langs/zh_CN.js"),    language: "zh_CN",    height: 300,});
//这样配置是没有成果的,请小伙伴们留神了

12.胜利配置成果如下:

13.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。