vue-cli3.x项目使用tinymce富文本编辑器

1.安装依赖包，建议tinymce包安装5.3版本。

npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S

2.(1)在public新建tinymce，将modules下tinymce的skins文件复制到public/tinymce文件夹下。
(2)因为tinymce是引文版的，所以还得引入中文语言包。中文语言包下载地址：zh_CN.js，放到public/tinymce下，和skins同级。
（3)富文本中表情包功能需要用到这个文件，将modules/tinymce/plugins/emoticons/js/emojis.js文件也复制到public/tinymce中，和skins同级。

3.引入包文件及主题文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.min.css'

4.引入富文本编辑时需要的插件，这些插件不一定都需要，都是可灵活配置的。

//扩展插件
//插入图片
import 'tinymce/plugins/image'
//链接
import 'tinymce/plugins/link';
//文字格式
import 'tinymce/plugins/code';
//表格插入
import 'tinymce/plugins/table';
//高级列表插件
import 'tinymce/plugins/lists';
//表情插件
import 'tinymce/plugins/emoticons'
// 字数统计插件
import 'tinymce/plugins/wordcount'; 
// 插入视频插件
import 'tinymce/plugins/media';
// 模板插件
import 'tinymce/plugins/template';
//粘贴
import 'tinymce/plugins/paste';
//预览
import 'tinymce/plugins/preview';
//上下文菜单
import 'tinymce/plugins/contextmenu';
//文字颜色
import 'tinymce/plugins/textcolor';
//全屏
import 'tinymce/plugins/fullscreen';
//查找替换 
import 'tinymce/plugins/searchreplace';

4.使用
注意：很多人在这一步都会发现如下图所示的报错信息

这个是因为你在引入配置路径时路径不对，特别是中文语言包引入的时候，我看到的有的博主说要加上publicPath，其实不加是可以的，要加的话先在vue.config.js里面配置公用路径。

<template>
    <Editor :id="tinymceId" v-model="tinymceHtml" :init="init"></Editor>
</template>

</script>
export default {
    name: 'tinymce-comp',
    components: {Editor},
    props:{
        tinymceId:{
            type:String,
            default:'tinymceId'
        },//使用不同id,防止缓存
        height:{
            type:Number,
            default:400,
        },
        plugins:{
            type:String,
            default:'link lists image code table emoticons wordcount media fullscreen preview paste contextmenu textcolor fullscreen searchreplace',
        },
        toolbar:{
            type:String,
            default:'fontselect | bold italic underline strikethrough | link unlink image emoticons | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | searchreplace removeformat fullscreen'
        },
        previewWidth:{
            type:Number,
            default:400
        },
        previewHeight:{
            type:Number,
            default:750
        }
    },
    data() {
        return {
            tinymceHtml: '',
            init: {
                placeholder:'请输入',
                //注意这个地址，千万不要写错了，这个地址对应你存放zh_CN.js的位置
                language_url: "/tinymce/zh_CN.js",
                language: "zh_CN",
                //皮肤主题：这个地址我看博主写的是引用到了skin.css这一级，但是写上去之后发现会报错
                skin_url: "/tinymce/skins/ui/oxide",
                //编辑区的css文件地址
                content_css: "/tinymce/skins/content/default/content.css",
                //富文本高度
                height: this.height,
                //编辑区css样式
                content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
                // 预览宽度
                plugin_preview_width: this.previewWidth,
                plugin_preview_height: this.previewHeight,
                lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
                //字体
                fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
                font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
                //插件
                plugins: this.plugins,
                powerpaste_word_import: 'merge',
                toolbar: this.toolbar,
                paste_data_images: true,
                // 底部的状态栏
                statusbar: true, 
                // 最上方的菜单
                menubar: true, 
                // 水印“Powered by TinyMCE”
                branding: false, 
                //默认表情列表文件地址
                emoticons_database_url:'/tinymce/emojis.js',
                
            }
        }
    },
    mounted() {
        tinymce.init({});
    },
}
</script>

其他详细配置可见官方文档：TinyMCE文档