英文官网：https://www.tiny.cloud/
中文官网：http://tinymce.ax-/
安装
使用npm install tinymce --save命令下载完整的包
npm install tinymce --save
下载完成之后，在node_modules下找到tinymce包下的资源拷贝到项目本地
由于tinymce默认是英文界面，自己项目需要中文界面，所以需要下载中文的语言包。还可以下载自己需要的语言包
在static/tinymce目录下新建一个lang目录存放语言包
使用
首先在组件中引入下载好的包
ps: 强烈建议封装成组件使用
import Editor from "@tinymce/tinymce-vue";
在components下注册富文本组件
components: {"tinymce": Editor},
在data里定义一个init变量来初始化我们的编辑器
props:{//传入的默认值value: {type: String,default: ''},//插件plugins: {type: [String, Array],default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'},//工具toolbar: {type: [String, Array],//如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'},}init: {branding:false, // 去水印language_url: '/static/tinymce/lang/zh_CN.js', //语言包路径地址language: 'zh_CN',height: 700,//编辑器高度width: '90%',//编辑器宽度plugins: this.plugins, // 插件toolbar: this.toolbar, // 工具栏// menubar:false,//顶部菜单是否显示content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',// 此处为图片上传处理函数，这里就没用base64的图片形式上传图片// 因为base64存储到服务器数据库太庞大了images_upload_handler: (blobInfo, success, failure) => {// 自定义上传逻辑let formdata = new FormData();formdata.append("file", blobInfo.blob(),blobInfo.filename());// 改为自己接口路径axios.post(url, formdata).then(res => {// 我的接口返回数据格式//{code: 0,data: {url: ....},message: ""}if(res.data.code === 200){success(res.data.data.url)}else{failure('上传失败！'+res.data.code)}})},init_instance_callback : function(editor) {// 富文本初始化回调}},
我贴一些常用的配置属性值。列表来自tinymce中文文档。
newdocument（新文档）bold（加粗）italic（斜体）underline（下划线）strikethrough（删除线）alignleft（左对齐）aligncenter（居中对齐）alignright（右对齐）alignjustify（两端对齐）styleselect（格式设置）formatselect（段落格式）fontselect（字体选择）fontsizeselect（字号选择）cut（剪切）copy（复制）paste（粘贴）bullist（项目列表UL）numlist（编号列表OL）outdent（减少缩进）indent（增加缩进）blockquote（引用）undo（撤销）redo（重做/重复）removeformat（清除格式）subscript（下角标）superscript（上角标）
使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用|来创建分组。
HTML 内容
<div><tinymce :init="init" v-model="myValue"></tinymce></div>
tinymce组件直接支持v-model指令，直接双向绑定数据。
在watch里接收传过来的value值
watch: {value (newValue) {this.myValue= newValue}}
本文源码
<template><div class="tinymce-editor"><editor v-model="myValue":init="init"></editor></div></template>
<script>import axios from 'axios'import Editor from '@tinymce/tinymce-vue';export default {components: {Editor},props: {//传入的默认值value: {type: String,default: ''},//插件plugins: {type: [String, Array],default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'},//工具toolbar: {type: [String, Array],//如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'},//编辑器高度height:{default:400},// 上传文件地址mediaUrl:{type: String,default: 'http://.......'}},data () {return {// 初始化富文本init: {branding:false,language_url: '/static/tinymce/lang/zh_CN.js', //语言包路径地址language: 'zh_CN',height: this.height,//编辑器高度width: '90%',//编辑器宽度plugins: this.plugins, // 插件toolbar: this.toolbar, // 工具栏// images_upload_url: this.mediaUrl, //上传路径elementpath:false,//标签路径是否显示// menubar:false,//顶部菜单是否显示paste_data_images: true,//可以粘贴图片，需要引入paste插件content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',// 此处为图片上传处理函数，这里就没用base64的图片形式上传图片// 因为base64存储到服务器数据库太庞大了images_upload_handler: (blobInfo, success, failure) => {},init_instance_callback : function(editor) {}},myValue: '',}},mounted () {tinymce.init({})},methods: {},watch: {value (newValue) {this.myValue = newValue}}}</script>
