可以先看看我之前的一篇文章，属于基础吧 在页面使用富文本编译器_超*的博客-CSDN博客
至于为什么还是用TinyMCE，不用ElementUI自带的富文本编译器，因为技穷/(ㄒoㄒ)/~~
同样参考一篇文章(进行修改、完善)：
VUE2下版本的项目加入富文本框实现_vue2富文本从js文件夹加载_我算哪枝小绿植的博客-CSDN博客
1、下载资源
代码语言：javascript复制npm install tinymce -S
npm install @tinymce/tinymce-vue@3.0.12、 开始
这里说一下，按照原博主的步骤是将node_module文件下的tinymce文件，拷贝一份到静态资源目录中。不要去拷贝到资源目录中，vue默认就会到node_modules中去找相应文件！
下载中文语言包，看我上面那篇基础文章。
创建一个组件，在组件中引入tinymce组件并初始化：
代码语言：javascript复制<template>
<tinymce :init="init" v-model="content"></tinymce>
</template>
<script>
//引入tinymce组件
import Editor from "@tinymce/tinymce-vue";
export default {
name: 'tinymceTest',
data(){
return {
init: {
language_url: "./zh_CN.js", //中文语言包路径
language: "zh_CN", //声明富文本的语言类型
height: 430,
menubar: true,//是否显示上面菜单
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_handler: (blobInfo, success, failure) => {
success('data:image/jpeg;base64,' blobInfo.base64()) //该处理器函数使用base64编码将图片转换为data:image/jpeg格式的字符串，并将其作为成功的结果传递给编辑器
}
},
content:''
}
},
components:{"tinymce":Editor}
}
</script>
<style scoped>
</style>注意： language_url中文语言包的路径我写的是./zh_CN.js，将下载的zh_CN.js文件复制到node_modules/tinymce目录下就行。
