TinyMCE在vue中的使用

概要

TinyMCE是个插件丰富，可扩展性强，功能配置灵活简单，加载速度快，界面好看，符合现代审美，可支持多种语言的富文本编辑器，支持嵌入web应用页面中使用，最大的优点是开源且大部分功能免费，常用的有内联样式和经典样式

官网地址：TinyMCE
中文文档可参考（该文档是仅支持原生html）：TinyMCE中文

使用场景例子：

要求将几十种word文档的内容动态展示到web页面，并且支持免费离线编辑页面内容

---

整体实现思路

利用mommoth将word文档内容先转化为html代码，再将html代码渲染到富文本编辑器内，这期间可能会导致部分样式流失，可以根据replace替换添加样式等

vue下载安装依赖

	//vue3安装命令
	npm install tinymce
	npm install @tinymce/tinymce-vue

	//vue2安装命令
	npm install tinymce@5.1.0
	npm install @tinymce/tinymce-vue@3.0.1

vue2项目要安装低版本的，否则因为不兼容会报错

安装之后在node_modules里面找到tiynmce文件，将里面的文件复制到根目录下的public或者assets文件夹下，这里我放在public里面的，如下图，删除多余的文件，这几个文件即可。（最底下的文件是tinymce.min.js,被水印遮住了，估计看不清）

里面的langs文件是需要汉化的语言包，从官网网页下载，下滑找到你想要的的语言包，这里我用的是中文包。

点击download下载下来是个压缩包，解压后就是langs文件放在对应的tinymce目录下

代码实现

 	   <tiny-editor
        ref="tinymceRefs"
        v-model="content"
        :init="init"
        id="textarea"
        @onClick="clickBtn"
      ></tiny-editor>

//js部分
import editorss from "@tinymce/tinymce-vue";
export default {
  name: "HelloWorld",
  components: {
    "tiny-editor": editorss,
  },
}

配置

	init: {
        // 配置信息
        selector: "#textarea", //这里selector是绑定上面组件
        height: 600,
        width: 1000,
        min_height: 450,
        language_url: "public/js/tinymce/langs/zh-Hans.js", // 中文包的存放路径
        language: "zh-Hans",
        statusbar: false, // 底部的状态栏
        // skin_url: "public/js/tinymce/skins/ui/oxide-dark",
        // content_css: "public/js/tinymce/skins/content/dark/content.min.css",
        // resize: false,
        //inline: true, //使用selector无法开启内联样式 这块待研究
        font_formats:
          "仿宋体=FangSong,serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
        table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
        //setup 和init_instance_callback是tinymce的两个生命周期
        setup(editor) {
          console.log("setup函数开始执行>>>>>>", editor);
        },
        init_instance_callback: function (editor) 
          console.log("init_instance_callback函数开始执行>>>>>>", editor);
        },
      },

一共有两个生命周期：

1. setup —— 还没渲染到页面之前所执行的方法

2. init_instance_callback —— 页面渲染完毕所执行的函数

此时富文本编辑器的页面会有一段黄色的文本提示：

解决办法：在public的文件夹下面index.html文件里面引入tinymce.min.js文件

	<script type="text/javascript" src="./js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="./js/tinymce/langs/zh-Hans.js"></script>

完整代码如下

提示：这里我是先上传文件拿到html元素后再渲染内容到编辑器内

<template>
  <div>
    <input id="document" @change="Buffer" type="file" />
    <div ref="output"></div>
    <div class="ceshi">
      76890-
      <tiny-editor
        ref="tinymceRefs"
        v-model="content"
        :init="init"
        id="textarea"
        @onClick="clickBtn"
      ></tiny-editor>
    </div>
  </div>
</template>
<script>
import mammoth from "mammoth";
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import editorss from "@tinymce/tinymce-vue";
export default {
  name: "HelloWorld",
  components: {
    "tiny-editor": editorss,
  },
  data() {
    return {
      content: "",
      htmlContent: "",
      html: "",
      editorfll: "",
      init: {
        // 配置信息
        selector: "#textarea", //这里selector是绑定上面组件
        height: 600,
        width: 1000,
        min_height: 450,
        language_url: "public/js/tinymce/langs/zh-Hans.js", // 中文包的存放路径
        language: "zh-Hans",
        statusbar: false, // 底部的状态栏
        // skin_url: "public/js/tinymce/skins/ui/oxide-dark",
        // content_css: "public/js/tinymce/skins/content/dark/content.min.css",
        // resize: false,
        //inline: true, //使用selector无法开启内联样式 这块待研究
        font_formats:
          "仿宋体=FangSong,serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
        table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
        setup(editor) {
          console.log("setup函数开始执行>>>>>>", editor);
          editor.on("click", function () {
            // console.log("click事件触发>>>>>>", editor.getContent());
          });
        },
        init_instance_callback: function (editor) {
          editor.setContent("");
          console.log("init_instance_callback函数开始执行>>>>>>", editor);
        },
      },
    };
  },
  watch: {},
  methods: {
    clickBtn() {},
    Buffer(event) {
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function (loadEvent) {
        var arrayBuffer = loadEvent.target.result;
        mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((res) => {
          this.html = res.value;
          // 将解析出来的dom元素的展示替换成自己想要的样子
          this.content = this.html.replace(/<table>/g,'<table style="border-collapse: collapse;width:860px;">')
            .replace(/<tr>/g, '<tr style="border: 1px solid rgb(204, 204, 204);color:#555555;">')
            .replace(/<td>/g,'<td style="border: 1px solid rgb(204, 204, 204); padding: 8px 15px;">')
            .replace(/<p>|<\/p>/g, "")
            //拿到html代码，再次渲染内容到编辑器内
          window.tinymce.get("textarea").setContent(this.content);
          // this.showResult(this.content);
        });
      };
      reader.readAsArrayBuffer(file);
    },
    showResult(result) 
      // 将解析出来的html展示在页面上
      document.getElementById("#output").html(result);
    },
  },
};
</script>

效果如下

插入mammoth的使用

刚开始我用新的脚手架（config文件啥也没配置），下载mammoth插件会报错，懒得改了，套个现成的框架就好使的很

//下载命令
npm install mammoth

项目里我是局部引入的，在用到的vue文件里面引入即可：

import mammoth from "mammoth";

使用：

<input id="document" @change="Buffer" type="file" />


Buffer(event) {
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function (loadEvent) {
        var arrayBuffer = loadEvent.target.result;
        mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((res) => {
          this.html = res.value;
          // 将解析出来的dom元素的展示替换成自己想要的样子
          this.content = this.html.replace(/<table>/g,'<table style="border-collapse: collapse;width:860px;">')
      		// 将解析出来的html展示在页面上
      		document.getElementById("#output").html(result);      		
        });
      };
      reader.readAsArrayBuffer(file);
    },