TinyMce富文本编辑器 针对Vue2

TinyMce中文文档地址：TInyMce中文文档

版本：

   这里为了防止不同版本之间有冲突，我们就将版本固定tinymce@5.1.0 -S以及tinymce/tinymce-vue@3.0.1版本；

 安装

npm install tinymce@5.1.0 -S

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

语言包（汉化）

安装完成后，在noed_modules中找到tinymce文件夹，将tinymce文件夹拷贝到public目录下（主要skins是必须的，有些文章是拷贝到static目录下，但是拷贝到static中我出现了资源路径出错的问题，这个我们后面讲）

TinyMce模式是英文界面，所以需要下载一个中文包，放在拷贝到的tinymce/langs中

 下载

官网下载中文语言包 zh_CN.js

 我们这次安装的是inymce@5.1.0 所以我们下载所有5版本的语言包

tingmce-vue 是一个组件,需要在components中注册,然后再使用 接下来我们直接将tinymce封装成一个组件使用

<template>
    <div class="tinymce-editor">
        <Editor
                :id="tinymceId"
                :init="init"
                :disabled="disabled"
        ></Editor>
    </div>
</template>
<script>
    import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
    import Editor from '@tinymce/tinymce-vue'//编辑器引入
    import 'tinymce/themes/silver/theme'//编辑器主题
    import 'tinymce/plugins/link'  //超链接
    import 'tinymce/plugins/paste'  //粘贴过滤
    import 'tinymce/plugins/preview'  //预览
     
    export default {
        components: {
            Editor
        },
        props: {
            //内容
            value: {
                type: String,
                default: ''
            },
            //是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            triggerChange: {
                type: Boolean,
                default: false,
                required: false
            },
            //插件
            plugins: {
                type: [String, Array],
                default: () => ['link', 'preview', 'paste']
            }
        },
        data() {
            return {
                //初始化配置
                tinymceId: 'tinymce',
                myValue: this.value,
                mytinymce: tinymce,
                init: {
                    selector: '#tinymce',
                    language_url: '/tinymce/langs/zh_CN.js',//汉化路径是自定义的，一般放在public或static里面
                    language: 'zh_CN',
                    skin_url: '/tinymce/skins/ui/oxide',
                    content_css: `/tinymce/skins/content/default/content.css`,
                    plugins: this.plugins,//插件
                    //工具栏
                    menubar: false, //隐藏菜单栏
                    toolbar: 'undo redo|bold italic forecolor|link preview', //字体大小
                    height: 500,//高度
                    placeholder: '在这里输入文字',
                    branding: false,//隐藏右下角技术支持
                    paste_preprocess: function(plugin, args) {
                        console.log(args.content);
                    },
                    paste_as_text: true,
                    //init_instance_callback为回调配置项
                    init_instance_callback:(editor) => {  
                        // console.log(`回调----`)
                        editor.on('input',e => {
                            // console.log('文本框input触发')
                            this.$emit('input',e.target.innerHTML)
                        });
                        editor.on('change',e => {
                            // console.log('文本框change触发')
                            this.$emit('change',e.level.content)
                        })
                    }
                }
            }
        },
        mounted () {
            tinymce.init({})
        },
        methods: {
        }
    }
</script>

调用组件

<template>
    <div class="meal_wrap" >
        <div class="tinymce-box">
            <TEditor ref="tinymceRef"></TEditor>
        </div>
    </div>
</template>
<script>
import TEditor from '../../components/tinymce'
export default {
    components: {
        TEditor
    },
    data() {
        return {
            
        };
    },
    methods: {
    }
};
</script>

 注意事项

有时候可能会出现上图的报错   有几种可能的原因 我遇到的是在引入资源路径出错的问题，解决方法是在路径前加一个公共的路径，即我们的配置的publicpath的前缀 <%= BASE_URL %>  或者把 publicPath 设置为 "/"​ 就行​​​​​​，前面不要加点 ；也有可能（我没遇到暂时）在import里引入的插件和plugins引入插件没有相互对应上，删除部分插件调整；

 。。。我也是刚接触  TinyMce  后续会在这里更新TInyMce 的配置 
如果这篇文章你对有用，请给我点个赞 谢谢 ^_^