vue.js2.0使用tinyMCE 5富文本编辑器

       首先先要阅读tinymce的文档，https://www.tiny.cloud/docs/quick-start/该网址为官方文档（英文的）介绍全面，如果看不懂也不要紧，有个好心的dalao做了一份中文文档https://www.tiny.cloud/docs/quick-start/，不过不如官网的全面，不过也很具有参考价值。

进入正题，vuejs安装tinymce

npm install tinymce -s

但是安装完以后并不能使用，原因我没有深入研究，好像是tinymce跟vuejs有冲突。所以官方为vuejs提供了一个组件tinymce-vue，所以必须要安装这个

npm install @tinymce/tinymce-vue -S

安装完以后说一下使用思路。

1. 把tinymce做成组件，这样在任何页面都可以引入
2. 引入基本文件开始制作组件
3. 初始化组件，设置配置项
4. 添加扩展插件并设置

首先创建组件并引入基本文件

import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

注册tinymce-vue组件并引用

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>
<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";

export default {
  components: {
    Editor
  }
}
</script>

初始化配置项，具体操作参考官方文档

init: {
        language_url: "/static/tinymce/langs/zh_CN.js",//语言包位置
        language: "zh_CN",//使用的语言
        skin_url: "tinymce/skins/ui/oxide",//主题色
        height: 500, //编辑器高度
        branding: false,//是否禁用“Powered by TinyMCE”
        menubar: false,//顶部菜单栏显示
        }

各国语言包下载地址https://www.tiny.cloud/get-tiny/language-packages/

当然还有其他插件比如

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

引入后还要配置初始化

//引入的js插件
plugins: 'lists image media table wordcount',
//配置在编辑器上的功能
toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',

在这里重点说一下图片上传功能（敲黑板用力的那种）

添加上传图片后要在初始化文件中添加以下内容

//接收上传图片的路径
images_upload_url: "demo/eUpload.php",
//图片保存路径
images_upload_base_path: "/demo",

传过去的图片name=“file“，我用的是php接收的时候$_request['file']，但是返回的时候一定要是json格式，形如这样：{ location : "/demo/image/1.jpg" }

你也可以使用images_upload_handler函数来处理图片，那么上面的2个配置就没用了

例如

 images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }

此处图片保存为base64位格式的图片，里面可以改成ajax传输，见仁见智。

最后上全部代码

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>
<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount contextmenu colorpicker textcolor"
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | fontsizeselect  | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat"
    }
  },
  data() {
    return {
      init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        // skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系
        height: 500,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: false,
        theme: "silver",
        images_upload_url: "/demo/eUpload.php",
        images_upload_base_path: "/demo/",
       
      },
      myValue: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    },
    downloadFile(blob) {
      var a = document.createElement("a");
      a.download = name;
      a.href = URL.createObjectURL(blob);
      a.click();
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>

如果希望移动端也可以显示编辑器就做如下添加

import 'tinymce/themes/mobile'

配置文件加入

mobile: {
          theme: "mobile",
          plugins: ["autosave", "lists", "autolink"],
          toolbar: ["undo", "bold", "italic", "styleselect","link","unlink","image","bullist","numlist","fontsizeselect","forecolor","styleselect","removeformat"]
        }

具体参考文档。

在此感谢网上的各位大佬给予我的帮助，踩了不少的坑，希望想我这样的萌新程序猿快速上手少踩坑。还有就是网上的文档复制粘的过多，让人非常气愤。所以才写了这篇文档希望可以作为参考，在此献丑了。