vue使用tinymce和tinymce-vue实现富文本 vue.js

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

【vue使用tinymce和tinymce-vue实现富文本】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

// 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.举例无效果配置:

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, });