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

50次阅读

共计 1991 个字符,预计需要花费 5 分钟才能阅读完成。

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

正文完
 0