Vue 自定义封装 Tinymce 富文本编辑器

Vue封装Tinymce富文本编辑器

一、下载Tinymce

1.下载链接

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

选择Self-hosted Releases-->Download TinyMCE Community

选择语言包Language Packs

创建一个自己的文件夹myTinymce

2.解压的文件保存到myTinymce

解压路径文件：①tinymce_5.10.3.zip\tinymce\js\tinymce

该文件夹里面保留文件：plugs、skins、themes、tinymce.min.js

②解压文件路径：tinymce_languages.zip\langs

二、创建Vue项目

1.vue create 项目名

2.创建一个组件

三、最简单的初始化

1.将langs文件、icons文件夹、skins文件夹、themes文件夹、tinymce.min.js文件复制粘贴到刚刚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", // 插件：预览

      plugins: "preview",

七、自定义 v-model

组件

 // 监听 tinymce 初始化完成事件

      setup: (editor) => {

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

          editor.setContent(this.value);

        });

      },

// 监听 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);

          });

      },