TinyMC编辑器简介
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。
TinyMCE的优势：
开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言。
下图为开启全部功能的截图
TinyMCE中文文档地址：TinyMCE中文文档中文手册
1、安装
vue-cli版本：3.x+
安装tinymce
npm install tinymce -S
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
这两个组件安装完之后，在public目录下新建文件夹static/tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的static/tinymce文件夹内，如下图所示
vue-cli版本：2.x
安装tinymce
npm install tinymce -S
安装tinymce-vue
npm install @tinymce/tinymce-vue@3.0.1 -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
注意： 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包
然后将这个语言包放到 static 目录下，为了结构清晰，我包了一层 tinymce 目录
这个是vue-cli2项目的放法
这个是vue-cli3项目的放法
2、配置中文语言
到官网下载中文语言包 zh_CN.js
在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示
vue-cli2.x 同理
3.组件
<template><!-- 富文本 --><div><editor v-model="content" :init="init" :disabled="disabled"></editor></div></template><script>import tinymce from "tinymce/tinymce";import Editor from "@tinymce/tinymce-vue";import "tinymce/icons/default/icons";import "tinymce/themes/silver";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";import "tinymce/plugins/preview";import "tinymce/plugins/code";import "tinymce/plugins/link";import "tinymce/plugins/advlist";import "tinymce/plugins/codesample";import "tinymce/plugins/hr";import "tinymce/plugins/fullscreen";import "tinymce/plugins/textpattern";import "tinymce/plugins/searchreplace";import "tinymce/plugins/autolink";import "tinymce/plugins/directionality";import "tinymce/plugins/visualblocks";import "tinymce/plugins/visualchars";import "tinymce/plugins/template";import "tinymce/plugins/charmap";import "tinymce/plugins/nonbreaking";import "tinymce/plugins/insertdatetime";import "tinymce/plugins/imagetools";import "tinymce/plugins/autosave";import "tinymce/plugins/autoresize"; export default {components: {Editor},props: {value: {type: String,default: ""},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default:"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize"},toolbar: {type: [String, Array],default:"code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \table image media charmap hr pagebreak insertdatetime | fullscreen preview"}},data() {return {//初始化配置init: {//menubar: true, // 菜单栏显隐language_url: "/static/tinymce/langs/zh_CN.js",//language_url: '../../static/tinymce/langs/zh_CN.js', // vue-cli2.xlanguage: "zh_CN",skin_url: "/static/tinymce/skins/ui/oxide",//skin_url: '../../static/tinymce/skins/ui/oxide', // vue-cli2.x//content_css: '../../static/tinymce/skins/content/default/content.css',// vue-cli2.xheight: 770,min_height: 770,max_height: 770,toolbar_mode: "wrap",plugins: this.plugins,toolbar: this.toolbar,content_style: "p {margin: 5px 0;}",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,// 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())reserveTableFoodDescribe(formData).then(res => {if (res.code === '10000') {const file = res.datasuccess(file.url)return}failure('上传失败')}).catch(() => {failure('上传出错')})}},content: this.value};},mounted() {tinymce.init({});},methods: {},watch: {value(newValue) {this.content = newValue;},content(newValue) {this.$emit("input", newValue);}}};</script><style scoped lang="scss"></style>
4.组件使用
import Editor from "@/components/imcoder-tinymce";components: { Editor },<editor v-model="yourContent"></editor>
5.配置工具项
TinyMCE菜单配置详解
