Vue封裝Tinymce富文本編輯器

一、下載Tinymce

1.下載鏈接

https://www.tiny.cloud/get-tiny/downloads/

選擇Self-hosted Releases-->Download TinyMCE Community

選擇語言包Language Packs

創(chuàng)建一個自己的文件夾myTinymce

2.解壓的文件保存到myTinymce

解壓路徑文件：①tinymce_5.10.3.zip\tinymce\js\tinymce

該文件夾里面保留文件：plugs、skins、themes、tinymce.min.js

②解壓文件路徑：tinymce_languages.zip\langs

二、創(chuàng)建Vue項目

1.vue create 項目名

2.創(chuàng)建一個組件

三、最簡單的初始化

1.將langs文件、icons文件夾、skins文件夾、themes文件夾、tinymce.min.js文件復(fù)制粘貼到剛剛Vue組件的文件夾里面。

2.Vue組件里面引入包

js文件

import "./tinymce.min.js";

import "./langs/zh_CN.js";（四、引入語言包）

import "./themes/silver/theme.min.js";

import "./icons/default/icons.min.js";

css文件

@import url("./skins/ui/oxide/skin.min.css");

3.less如果沒引入

cnpm install less less-loader@5

五、配置菜單欄和工具欄

// 菜單欄

? ? ? menubar: "bar1 bar2",

? ? ? menu: {

? ? ? ? bar1: { title: "默認菜單欄", items: "copy paste" },

? ? ? ? bar2: { title: "菜單欄2", items: "cut" },

? ? ? },

// 工具欄

? ? ? toolbar: "unde redo",

六、菜單欄和工具欄插件擴展

?menu: {

? ? ? ? bar1: { title: "默認菜單欄", items: "copy paste" },

? ? ? ? bar2: { title: "菜單欄2", items: "cut previewS" },

? ? ? },// 工具欄

? ? ? toolbar: "unde redo preview", // 插件：預(yù)覽

? ? ? plugins: "preview",

七、自定義 v-model

組件

?// 監(jiān)聽 tinymce 初始化完成事件

? ? ? setup: (editor) => {

? ? ? ? editor.on("init", (e) => {

? ? ? ? ? editor.setContent(this.value);

? ? ? ? });

? ? ? },

// 監(jiān)聽 input 和 change 事件，實時更新value

? ? ? init_instance_callback: (editor) => {

? ? ? ? editor.on("input", (e) => {

? ? ? ? ? this.$emit("input", e.target.innerHTML);

? ? ? ? }),

? ? ? ? ? editor.on("change", (e) => {

? ? ? ? ? ? this.$emit("input", e.level.content);

? ? ? ? ? });

? ? ? },