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

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

UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲

bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...

kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了

wangEditor：轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发。不过作者很勤奋，广义上和我是一家人，打个call

quill：本身功能不多，不过可以自行扩展，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,
    },

// mounted

tinymce.init({});

10-1.全局注册,在mian.js中添加如下代码:

import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default"; 
import "tinymce/themes/silver/theme.min.js";
Vue.component('editor', Editor); //注册全局组件

10-2.引入注意事项:

// 使用 skin_url: require("tinymce/skins/ui/oxide-dark/skin.min.css"),

这样的形式引用的时候,注意使用 require 方式,不然是无效的

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.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。