vue项目结合element-ui使用tinymce富文本编辑器（so easy操作）

一、命令行 npm install tinymce -S 下载富文本依赖包

二、由于tinymce 默认是英文界面，所以需要的可以下载一个中文语言包~ 然后将整个包放在 static 文件夹下:

三、在主入口文件main.js中引入相关插件样式：
如下图——

为方便大家粘贴再贴出代码好了：

// 富文本编辑器
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
//样式
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'
//主题
import 'tinymce/themes/silver'
// 扩展插件
import 'tinymce/plugins/link' //链接插件
import 'tinymce/plugins/image' //图片插件
import 'tinymce/plugins/media' //媒体插件
import 'tinymce/plugins/table' //表格插件
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/quickbars' //快速栏插件
import 'tinymce/plugins/fullscreen' //全屏插件
// 引入中文包，本地化
import '../static/tinymce/zh_CN.js'
Vue.prototype.$tinymce = tinymce;
Vue.use(VueTinymce);

四、然后只需要在引用富文本插件的<template></template>的标签引用富文本<vue-tinymce />组件就可以了，需要注意的是往往我们需要在data中动态地：setting对组件绑定一些基础的配置：

<script>
	export default{
		data(){
			return {
		      setting: {
		        // 富文本编辑器setting配置
		        menubar: false,
		        toolbar:
		          "undo redo | bold italic underline strikethrough | formatselect alignleft 			aligncenter alignright alignjustify | link unlink | numlist bullist |   fontselect fontsizeselect forecolor backcolor  | indent outdent | superscript subscript | removeformat  ",
		        toolbar_drawer: "sliding",
		        language: "zh_CN",
		        height: 420,
		        branding: false
		      }
			}
		}
	}
</script>

五、就是酱紫简单，页面已经引入富文本插件了，如下图：

六、最后的最后我晓得肯定有小懒虫懒得去找安装包啦，附上百度网盘链接自取哈~
链接：https://pan.baidu.com/s/108KNRLKEu7rFu9iienZPvw
提取码：voxv