vue项目使用tinymce 适用于5.0版本

1.安装tinymce包

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

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

langs为下载的语言包

 

 

 3.组件中引入tinymc

import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import 'tinymce/icons/default'

4.配置int

//powerpaste插件为tinymce的收费插件，下载之后放入static/tinymce/plugins文件夹
//该插件作用为复制word文档时批量上传图片，不需要的可以不要

props: {
        //传入一个value，使组件支持v-model绑定
        value: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        plugins: {
            type: [String, Array],
            default:'lists image table wordcount powerpaste code'//插件
        },
        toolbar: {
            type: [String, Array],
            //菜单
            default:'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
        }
    },
    data() {
        return {
            //初始化配置
            init: {
               language_url: 'tinymce/langs/zh_CN.js', //如果语言包不存在，指定一个语言包路径
                language: 'zh_CN', //语言
                skin_url: 'tinymce/skins/ui/oxide',
                content_css: 'tinymce/skins/content/default/content.css',
                height: '500px',
                selector: 'textarea',  // change this value according to your HTML
                plugins: this.plugins, //插件
                //以下为powerpaste插件配置
                convert_urls: false,
                external_plugins: {
                    powerpaste: `/tinymce/plugins/powerpaste/plugin.min.js` // 注意这里路径一定要写对！！！一定要写对  然后在puligins里添加
                },
                end_container_on_empty_block: true,
                powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear，效果自行切换对比
                powerpaste_html_import: 'propmt',// propmt, merge, clear
                powerpaste_allow_local_images: true,
                paste_data_images: true,
                //以上为powerpaste插件配置
                toolbar: this.toolbar, //工具栏
                branding: false, //技术支持(Powered by Tiny || 由Tiny驱动)
                menubar: true, //菜单栏
                theme: 'silver', //主题
                //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
                //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                images_upload_handler: (blobInfo, success, failure) => {
                    console.log(blobInfo, success, failure)
                    
                }
            },
           
        };
    },