vue中tinymce编辑器的使用

本来，我用的富文本编辑器是UEditor。然而，这个富文本编辑器太重了，而且百度现在也不维护了。

所以我用了tinymce轻量级的，也是盲目的使用。

如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce

然而我并没有购买。所以只能下载 tinymce来使用

1.安装

npm install tinymce -S

2.安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下。tinymce 默认是英文界面，所以还需要下载一个中文语言包zh_CN.js。如图：

3.将tinymce创建为Vue的组件，便于日后复用，创建组件editor.vue

<template>
        <textarea :id="id" :value="value"></textarea>
</template>
<script>
    import tinymce from 'tinymce/tinymce';
    import 'tinymce/themes/modern/theme';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/link';
    const INIT = 0;
    const CHANGED = 2;
    var EDITOR = null;
    export default {
        props: {
            value: {
                type: String,
                required: true
            },
            setting: {}
        },
        watch: {
            value: function (val) {              
                console.log('init ' + val)
                if (this.status == INIT || tinymce.activeEditor.getContent() != val){
                    tinymce.activeEditor.setContent(val);
                }
                this.status = CHANGED
            }
        },
        data: function () {
            return {
                status: INIT,
                id: 'editor-'+new Date().getMilliseconds(),
            }
        },
        methods: {},
        mounted: function () {
            const _this = this;
            const setting =
                {
                    selector:'#'+_this.id,
                    language:"zh_CN",
                    language_url: '../../../static/zh_CN.js',
                    skin_url: '../../../static/skins/lightgray',
                    init_instance_callback:function(editor) {
                        EDITOR = editor;
                        console.log("Editor: " + editor.id + " is now initialized.");
                        editor.on('input change undo redo', () => {
                            var content = editor.getContent()
                            _this.$emit('input', content);
                        });
                    },
                    plugins:[]
                };
            Object.assign(setting,_this.setting)
            tinymce.init(setting);
        },
        beforeDestroy: function () {
            tinymce.get(this.id).destroy();
        }
    }
    
</script>

4.其他页面的引用

<FormItem label="发布内容" prop="content1">                                                      
     <!-- 组件有两个属性 value 传入内容双向绑定 setting传入配置信息 -->
     <editor class="editor" ref="ue1" :value="content1"  :setting="editorSetting" @input="contentUe"></editor>
</FormItem>      

import editor from '../../text-edit/editor.vue'

export default {
    name: "bulletin-add",
    components: {
        editor
    },
 }

        contentUe(value){         
             this.content1 = value; //富文本中的内容
        },
        //新增编辑保存
        submitbulletin() {                 
            var params = {                       
                content: Base64.encode(this.content1),//公告内容              
            }           
            if (this.editid == "" || this.editid == undefined) {
                var url = this.GLOBAL.API_ACCOUNT_ADD
            } else {         
                params.id = this.editid
                var url = this.GLOBAL.API_ACCOUNT_EDIT
            }
            Vue.axios.post(url, params).then(res => {
                if (res.data.retCode == 200) {
                    this.$Message.success("操作成功")
                    this.$router.go(-1)
                } else {
                    this.$Message.error(res.data.message);
                }
            })
        },
        //编辑 详情       
        editbulletin() {        
            var params = {
                id: this.editid           
            }
            var url = this.GLOBAL.API_ACCOUNT_EDITSEE
            Vue.axios.get(url, { params }).then(res => {
                if (res.data.retCode == 200) {              
                    this.content1 = Base64.decode(res.data.data.content)                                                                                                                  
                } else {
                    this.$Message.error(res.data.message);
                }
            })
        },

注：这里用base64加密了。目的是为了，防止XSS攻击