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组件并引用

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

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传输，见仁见智。

最后上全部代码

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

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"]
        }

具体参考文档。

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