公司官网后台需要做一个上传新闻、公告的功能，自然而然就需要用到了富文本编辑器。
UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Quill，这是当前比较热门的几个编辑器，网上评论褒贬不一，使用哪个更是根据你的业务需求来定。
当时看的说是Quill与Vue结合比较好，就使用了Quill。开发完之后，才发现有一个问题。在编辑器中插入一张图片，使他居中，在编辑器界面可以居中显示，但是上传到公司官网上后就不居中了。图片的样式竟然不是添加的行内样式，而是一个Quill的类名。再加上老大对Quill的编辑器界面没太有好感，果断放弃重新做。。。
纠结半天后，选择使用TinyMCE(中文文档)。我用的是Vue2.x ，npm直接装tinymce 包，装的是最新版本，可能和版本有关系，装完之后在组件里一引入，就开始报各种404错误，啥js、css找不到，，，最后终于找到了兼容的版本。
我使用的版本为
"@tinymce/tinymce-vue": "^2.1.0","tinymce":"^5.0.12"
安装npm包
npm install tinymce -Snpm install @tinymce/tinymce-vue -S
下载的时候可以先在 static 下面建个目录 tinymce，下载 tinymce 完成后在 node_modules 中找到 tinymce目录，将skins和plugins复制到 static\tinymce 目录下面
下载中文语言包
下载地址
下载完成后将其解压到 static\tinymce 目录下面
组件内引入
import tinymce from 'tinymce/tinymce'import Editor from '@tinymce/tinymce-vue'//此时的 tinymce 包含了一些基本功能插件，如果需要其他功能，需要引入对应的功能插件，并在 plugins 和 toolbar 中使用插件import 'tinymce/themes/modern/theme'import 'tinymce/plugins/image'import 'tinymce/plugins/media'import 'tinymce/plugins/table'import 'tinymce/plugins/lists'import 'tinymce/plugins/contextmenu'import 'tinymce/plugins/wordcount'import 'tinymce/plugins/colorpicker'import 'tinymce/plugins/textcolor'
组件内使用
<template><div class="tinymce-editor"><editorv-model="myValue":init="init"></editor></div></template><script>export default {components: {Editor},}</script>
在 data 中进行编辑器相关的配置
data() {return {init: {language_url: '/tinymce/langs/zh_CN.js', //语言包的路径language: 'zh_CN',skin_url: '/tinymce/skins/lightgray',height: 350,width: 1100,plugins: "lists image table colorpicker textcolor wordcount contextmenu",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',fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',branding: false,menubar: false, //顶部菜单栏显示//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {this.imgUpload(blobInfo, success, failure); //下文的自定义函数}},}}
此时不出意外编辑器界面应该出来了，接下来是上传图片到七牛服务器
获取token，自定义上传方法
废话不多说，直接上代码
mounted() {this.getUploadToken()},methods: {async getUploadToken() {let res = await this.$axios.$post('/common/getUploadToken') //更换自己的请求方法和路径this.qnToken = res.data},imgUpload(blobInfo, success, failure) {const axiosInstance = axios.create({ withCredentials: false }); //withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题let data = new FormData();data.append("token", this.qnToken); //七牛需要的token，后台获取data.append("file", blobInfo.blob());axiosInstance({method: "POST",url: 'https://up-', //上传地址，视情况更换data: data,timeout: 30000, //超时时间，因为图片上传有可能需要很久onUploadProgress: progressEvent => {//imgLoadPercent 是上传进度，可以用来添加进度条let imgLoadPercent = Math.round((progressEvent.loaded * 100) / progressEvent.total);}}).then(res => {// 调用成功回调，返回用七牛外链地址和返回的key拼接的图片路径success(`你的CDN地址${res.data.key}`);}).catch(function (err) {console.log(err);//上传失败});},}
不出意外就大功告成了。。。
