参考tinymce文档：点击此处跳转
步骤一：在vue中引入tinymce（点击跳转查看资料）
npm install @tinymce/tinymce-vue -S
步骤二：引入tinymce-vue进入到子组件中
import Editor from '@tinymce/tinymce-vue'
步骤三：注册tinymce-vue进入到组件中
// 注册tinymce组件components: {'editor': Editor}
步骤四：渲染template组件
<editor :init="init"></editor>
步骤五：初始化init tinymce
init: {// 组件plugins:' lists image colorpicker textcolor wordcount contextmenu autoresize',// 工具栏toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | link unlink image | removeformat ',branding: false,min_height: 300}
效果图：
优化：
怎么让组件汉化：
tinymce 汉化包下载：点击此处
首先发现tinymce-vue需要首费才能加入主体才能汉化，因此不得不用tinymce取代tinymce-vue
步骤一：安装tinymce
npm install tinymce -S
检查是否已经安装了tinymce
步骤二：在node_modules文件下找到tinymce文档，复制tinymce放入项目的根目录下static的文件夹中
步骤三：把zh_CN.js放入根目录下static文件夹中
步骤四：初始化组件
代码
<template><div class="tinymce"><h1>tinymce Children</h1><editor id="tinymce" v-model="tinymceHtml" :init="init"></editor></div></template><script>// 引入tinymce主件import tinymce from './../../static/tinymce/tinymce'// 必须引入主体才能汉化和显示import './../../static/tinymce/themes/silver/theme'// 引入tinymce-vue组件import Editor from '@tinymce/tinymce-vue'// 引入图片上传组件import image from './../../static/tinymce/plugins/image'export default {name: 'tinymce',data () {return {tinymceHtml: '',init: {// 引入汉化组件language_url: './../../static/zh_CN.js',// 设定语言为中文language: 'zh_CN',// 加入主题skin_url: './../../static/tinymce/skins/ui/oxide',// 注册功能组件plugins:' lists image colorpicker textcolor wordcount contextmenu autoresize',// 注册工具栏toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | link unlink image | removeformat '}}},mounted () {// 页面加载的时候初始化组件tinymce.init({})},components: { Editor }}</script><style scoped></style>
最后呈现的效果图：
备注：图片，js，css等等一些类静态文件放在static文件下才会有效
（点击查看补充资料）
源码地址：/gyfgyz/vue-tinymce
