前言：
之前vue用的富文本插件 tinymce ,感觉还是停实用的，正好最近又用到了，在这里分享下，最下面提供中文文档，需要更多功能，或者感觉有不详细的可以看下，也可以留言问我，我看到肯定会回复的。
效果：
步骤：
第一：安装两个插件，前者是 tinymce 插件，后者是他提供的富文本模板插件
npm i tinymce
npm i @tinymce/tinymce-vue
第二：下载语言包 https://www.tiny.cloud/get-tiny/language-packages/
里面除了简体还有我们国家的台湾地区使用的繁体字的包，一般简体的就够了，只下载第一个
在assets里面弄个语言文件夹，或者你可以放任意地方，记得这个要改路径的
第三：封装好的组件 tinymce .vue
<template>
<div class="tinymceDiv">
<textarea :id="id"></textarea>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
//这下面是tinymce的插件
import 'tinymce/themes/silver/theme'
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import 'tinymce/plugins/code'//显示源代码插件
import 'tinymce/plugins/advlist' // 这几条引入是因为我的导入不了，不知道为啥
import 'tinymce/plugins/link'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/contextmenu'
//这里写你自己存放语言包的路径
import '@/assets/langs/zh_CN.js'
export default {
name:'',
props:{
id:String,
tinyVal:String,//内容绑定
},
data () {
return {
init:{
selector: '#'+this.id,
language: 'zh_CN',
// skin_url: 'tinymce/skins/ui/oxide',
//插件-实现插入图片等功能
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,
menubar: false,//顶部菜单栏显示
min_height:150,//高度
statusbar: false
},
};
},
methods:{
/**外部调用该方法，可以拿到绑定数据*/
release(){
//content 是文本内容带标签
let content = tinymce.get(this.id).getContent();
// getContent( { 'format' : 'text'} );//这是获取里面的文本文件，不带标签
return content;
},
/**外部调用该方法，可以修改绑定数据*/
setData(data){
tinymce.get(this.id).getContent(data);
},//数据回填
},
mounted () {
//配置的初始化
tinymce.init(this.init)
},
beforeDestroy() {
//销毁
tinymce.get(this.id).destroy();
},
watch:{
tinyVal(val){
tinymce.get(this.id).setContent(val);//动态设置内容
},
}
}
</script>
<style>
.tinymceDiv{
width:100%;
height:100%;
}
</style>
第四：调用方法：
template部分：
<tinymce ref="bzlc" :id="'tinymceBzlc'" :tinyVal='teamContent'></tinymce>
js部分：
import tinymce from "@/components/common/tinymce"; //富文本
components: {
tinymce,
},
data:{
"teamContent": "<p>幸福 人和 测试增加数据 在加1111222</p>",
}
methods:{
let content = this.$refs.bzlc.release();//content就是富文本内容
}
第五：也是最大的坑，main.js 引入 css 文件，不引入这个，会发现一切正常，但是页面没东西
import 'tinymce/skins/ui/oxide/skin.css'
好了，到这里就可以实现我上面的效果了，下面再提供 官方api 的链接；
中文文档地址： http://tinymce.ax-z.cn/
这里还提供一个别的大神的地址，也是我最早的参考文献之一：
https://blog.csdn.net/liub37/article/details/83310879
