tinymce文本编辑器在vue中的使用

1、npm install --save tinymce@5.2.2

2. 从node_modules/tinymce目录中将skins和plugins文件复制出来，我是在static目录创建了一个tinymce文件夹，然后将复制出来的文件放在tinymce里。

3、在页面中的使用

<1>

// 引入组件

import tinymce from 'tinymce/tinymce'

import Editor from '@tinymce/tinymce-vue'

// 引入富文本编辑器主题的js和css

import 'tinymce/themes/silver/theme.min.js'

import 'tinymce/skins/ui/oxide/skin.min.css'

import 'tinymce/icons/default/icons.min.js'

// 扩展插件

// import 'tinymce/plugins/image'

import 'tinymce/plugins/link'

import 'tinymce/plugins/code'

import 'tinymce/plugins/table'

import 'tinymce/plugins/lists'

import 'tinymce/plugins/wordcount'

<2>

引入组件

<3>在state中初始化所需的组件和container

// tinymce的绑定值

tinymceHtml: '',

// tinymce的初始化配置

editorInit: {

selector: '#tinymce',

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

language: 'zh_CN',

skin_url: '/static/tinymce/skins/ui/oxide',

height: 300,

plugins: 'link lists image code table wordcount',

toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | removeformat',

statusbar: true, // 底部的状态栏

menubar: true, // 最上方的菜单

branding: false // 水印“Powered by TinyMCE”

},

<4> mounted() {//初始化

tinymce.init({})

},

***注意：结合其他样式框架使用时在弹窗中使用有时候会遇到富文本编辑框的组件弹窗被覆盖问题

例如 结合elementui的el-dialog使用时；在App.vue中写入以下样式表能解决此问题

/* 富文本菜单 */

.tox-tinymce-aux {

z-index: 9999 !important;

}***