一、TinyMCE是什么？
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
我们可以先大体看一下配置完成后的样子
注：博主使用的TinyMCE版本是 “tinymce”: “^4.8.2” 如果超过此版本可能会导致一些问题。
首先如果想要在Vue中使用TinyMCE，我们需要准备一些什么？
汉化的中文语言包：zh_CN.js
下载下来之后 对应的是一个js文件，这个时候我们先不用管它。
这个时候我们就可以使用yarn/npm来下载对应的tinymce包了，因为我们需要配置vue所以我们还需要下载一个对应的@tinymce/tinymce-vue这个包。
npm install tinymce@4.8.2 -S // tinymce富文本编辑器包npm install @tinymce/tinymce-vue -S // 配置Vue tinymce官方提供的
当下在完成之后我们就可引用并使用了
这个时候我们在node_modules找到这个对应的包然后将其拉取到static或者public文件夹下，当然你拉到那个文件夹下都没关系，知道你的配置路径可以找到就ok。
我在这里的话，因为项目是采用vue-cil2来整体构建的所以就拉取到了static文件夹下
当复制完成后，我们将开始下载的中文汉化包拉到我们的tinymce中
接下来我们就上代码。
子组件 editor.vue组件
<template><div class='tinymce'><editor id='tinymce' v-model='sunHtml' @input="inp()" :init='init'></editor></div></template><script>import axios from 'axios' // 因为上传图片地址是本地服务器 所以我们需要引入axios当然你也可以用原生ajax或fetch来发请求import tinymce from 'tinymce/tinymce' // 引入我们下载的tinymce包import '../../../static/tinymce/themes/modern/theme' //引入theme文件，必须要引入的import Editor from '@tinymce/tinymce-vue' // 必须要引官方给我们的配置vue包// 下方import引入都是文本编辑器中的配置项，这个根据个人需求去引入import '../../../static/tinymce/plugins/image'import '../../../static/tinymce/plugins/link'import '../../../static/tinymce/plugins/code'import '../../../static/tinymce/plugins/table'import '../../../static/tinymce/plugins/lists'import '../../../static/tinymce/plugins/contextmenu'import '../../../static/tinymce/plugins/wordcount'import '../../../static/tinymce/plugins/colorpicker'import '../../../static/tinymce/plugins/textcolor'export default {name: 'tinymce',// 因为我是在项目中使用的 所以这个时候我是采用了组件传值一系列方法来使用的// 当然你可以直接就使用v-model来绑定 （data中直接定义上方的v-model双向绑定值即可）props: {// 父组件传递过来的值tinymceHtml: {// 类型我们给其定义为String类型type: String,},},watch: {// 我们需要定义一个监听器tinymceHtml: {deep: true, // 深度监听 可加可不加当你传递的是一个对象时，我们需要将深度监听加上handler(newVal, oldVal) {// 我在这里直接让v-model的值等于this.tinymceHtml父组件传递过来的值了，// 当然你等于newVal也可以 这个时候我们就实现了sunHtml双绑值同步于父组件传递的tinymceHtml值this.sunHtml = this.tinymceHtml}}},data() {return {// 定义v-model双向绑定值，然后让其默认等于父组件传递过来的值sunHtml: this.tinymceHtml,uploadUrl: process.env.UPLOAD_URL, // 自己定义的文件上传到服务器的上传地址picUrl: process.env.PIC_URL, // 上传到服务器后读取前缀路径（用于拼接显示使用的）// tinymce配置项 着重将下方两个路径换掉就可以了init: {language_url: '/static/tinymce/zh_CN.js', // 配置中文的路径language: 'zh_CN',skin_url: '/static/tinymce/skins/lightgray', // 配置项的路径height: 300,plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',branding: false,// 图片读取前缀路径images_upload_base_path: this.picUrl,// 图片本地上传方法 点击上传后执行的事件images_upload_handler: (blobInfo, success, failure) => {this.handleImgUpload(blobInfo, success, failure)}}}},created() {// 可写可不写 都行this.sunHtml = this.tinymceHtml},mounted() {// 初始化tinymcetinymce.init({})},methods: {//子组件向父组件传值事件inp() {this.$emit('inp', this.sunHtml)},// 上传本地 图片执行事件handleImgUpload(blobInfo, success, failure) {let formdata = new FormData()// append 方法中的第一个参数就是 我们要上传文件 在后台接收的文件名// 这个值要根据后台来定义// 第二个参数是我们上传的文件formdata.append('file', blobInfo.blob())// axios 定义上传方法axios({method: "post", // post方法url: this.uploadUrl, // 请求上传图片服务器的路径headers: {// 配置headers请求头Authorization: localStorage.getItem('logintoken'), // token认证，看后台'Content-Type': 'application/x-www-form-urlencoded', // 采用表单上传的方式，看后台如何接受},data: formdata // 请求数据formdata}).then(res => {if (res.data.code != 200) {// 上传失败执行此方法，将失败信息填入参数中failure('HTTP Error: ' + res.msg);return}// 上传成功之后，将对应完整的图片路径拼接在success的参数中success(this.picUrl + res.data.fileUrl);})}},components: { Editor }}</script><style></style>
父组件shop.vue组件（因为代码太多了，就不放整体文件了）
// 引入tinymce富文本编辑器组件import Editor from './editor'// 注册组件components: {Editor}// html引用部分<editor :tinymceHtml='传递给子组件的值' @inp='子组件传值执行的事件'></editor>
这个时候我们再来看我们的文本编辑器
上传图片到本地服务器的功能也就实现啦。
