在项目开发中，一般在后台管理系统会有编辑需求，那我们就需要使用到富文本这个东西。现在在写vue项目中就需要到富文本编辑器，所以给大家推荐一款富文本编辑器(TinyMCE)

首先，下载编辑器依赖包

npm install tinymce --save

or

yarn add tinymce

在需要用到编辑器的地方引入

import tinymce from 'tinymce/tinymce'

import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver/theme'

import 'tinymce/icons/default/icons'

import 'tinymce/plugins/image'

import 'tinymce/plugins/link'

import 'tinymce/plugins/code'

import 'tinymce/plugins/table'

import 'tinymce/plugins/lists'

import 'tinymce/plugins/contextmenu'

import 'tinymce/plugins/wordcount'

import 'tinymce/plugins/colorpicker'

import 'tinymce/plugins/textcolor'

export default{

name:'TinymceEditor',

components: {

Editor

},

props: {

value: { type: String, required:true }, //编辑内容

option: { type: Object, default: undefined }, //配置参数

disabled: { type: Boolean, default: false}

},

data() {return{

init: {

menubar:false, //禁用菜单栏

branding: false, //隐藏右下角技术支持

elementpath: false, //隐藏底栏的元素路径

font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',

fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px',

language_url:'/static/tinymce/langs/zh_CN.js',

language:'zh_CN',

skin_url:'/static/tinymce/skins',

content_css:'/static/tinymce/skins/content/content.css',

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`,

//toolbar: 'bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | table | image |alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo | ',

//工具栏1

toolbar1: 'bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | ',//工具栏2

toolbar2: ' table | image | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo',

contextmenu:false, //禁用富文本的右键菜单，使用浏览器自带的右键菜单

height: 500,

...this.option

}

}

},

computed: {

dateValue: {return this.value ? this.value : ''},

set(val) {this.$emit('input', val)

}

}

},

mounted() {

tinymce.init({})

},

methods: {

}

}

但是当富文本在某一个弹窗上使用时，工具栏会出现下拉选择时的层级比弹窗的小，所以，选项会被弹窗遮挡。

而解决这个问题，需要把工具栏的下拉框的层级提高，找到skins/skins.min.css文件

把class名为tox-tinymce-aux的第一个的z-index属性变大即可