乐趣区

关于vue.js:vue使用tinymce和tinymcevue实现富文本

jiezi

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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

退出移动版