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

4.其他页面的引用

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攻击