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