tinymce在vue2中的用法

一、版本

本文是针对vue2中使用 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

三、语言包

安装命令后，在 node_modules 中找到 tinymce文件夹，然后将tinymce目录拷贝到 static目录下（可以根据自己需求复制对应的文件夹，但是skins是必需的）

tinymce 默认是英文界面，所以还需要下载一个中文包，我是放到tinymce/langs中

我的static/tinymce文件如下图：

四、初始化

    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'  //预览

 

• tingmce-vue 是一个组件,需要在components中注册,然后再使用

        components: {
            Editor
        }

        <Editor
                :id="tinymceId"
                :init="init"
                :disabled="disabled"
        ></Editor>

 

• 此处的 init 是 tinymce 初始化配置项，编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件（我的路径）

 

                init: {
                    selector: '#tinymce',
                    language_url: '../static/tinymce/langs/zh_CN.js',//汉化路径是自定义的，一般放在public或static里面
                    language: 'zh_CN',
                    skin_url: '../static/tinymce/skins/ui/oxide',
                    content_css: `../static/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 中也需要初始化一次：

         mounted () {
            tinymce.init({})
        },

五、扩展插件

• 完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能，tinymce 通过添加插件 plugins 的方式来添加功能

六、完整代码

1、把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: '../static/tinymce/langs/zh_CN.js',//汉化路径是自定义的，一般放在public或static里面
                    language: 'zh_CN',
                    skin_url: '../static/tinymce/skins/ui/oxide',
                    content_css: `../static/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>

2、调用组件

<template>
    <div class="meal_wrap" >
        <div class="tinymce-box">
            <TEditor ref="tinymceRef"></TEditor>
        </div>
        <!-- <div>富文本框内容：{{tinymceObj}}</div> -->
        <div class="tinymce-btn">
            <Wb-button type="ghost" @click="tinymceClose">清空</Wb-button>
            <Wb-button type="primary" @click="tinymceSave">确定</Wb-button>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import TEditor from '../../components/tinymce'
import { deconstructText } from '../../services/DeconstructText';

export default {
    components: {
        TEditor
    },
    data() {
        return {
            
        };
    },
    methods: {
        dutyDetailClick(){
            this.$nextTick(() => {
                let html = '<p><span style="color: rgb(224, 62, 45);" data-mce-style="color: #e03e2d;">1、方便；</span></p><p>2、快捷；</p>';
                if (!html) {
                    html = '';                    
                }
                // 给富文本框赋值
                this.$refs.tinymceRef.$el.querySelector('iframe').contentDocument.querySelector('body').innerHTML = html;
            });
        },
         
        tinymceClose(){ 
            // 清空富文本框
            this.$refs.tinymceRef.$el.querySelector('iframe').contentDocument.querySelector('body').innerHTML = '';
        },
        tinymceSave(){
            //富文本框保存获取值
            let pText = this.$refs.tinymceRef.$el.querySelector('iframe').contentDocument.querySelectorAll('p');
            let html = this.$refs.tinymceRef.$el.querySelector('iframe').contentDocument.querySelector('body').innerHTML;
            let json = JSON.stringify(deconstructText(pText));//这一步是前端把值封装成后台想要个数据格式，根据你自己需求添加
        }
    }
};
</script>

 

-------粗略记录，后期优化