vue中使用tinymce

<template>
    <div>
        <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue" ></Editor>
    </div>
</template>

<script>
    //引入tinymce-vue
    import Editor from '@tinymce/tinymce-vue'
     //公共的图片前缀
    //import Global from "./Global";
    export default {
        components: {Editor},
        props: {
            //编号
            id:{
                type:String
            },
            //内容
            value: {
                type: String,
                default: ''
            },
            //是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            //插件
            plugins: {
                type: [String, Array],
                default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
            },
             //工具栏
            toolbar: {
                type: [String, Array],
                default: 'code undo redo restoredraft | fullscreen | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | bdmap indent2em lineheight formatpainter axupimgs',
            }
        },
        data() {
            let that = this;
            return {
                tinymceId: this.id || 'vue-tinymce'+ Date.parse(new Date()),
                myValue :this.value,
                init:{
                  //汉化,路径是自定义的，一般放在public或static里面，汉化文件要自己去下载
                  language_url: '/tinymce/zh_CN.js',
                  language: 'zh_CN',
                  //皮肤
                  skin: 'oxide',
                  //插件
                  plugins: this.plugins,
                  //工具栏
                  toolbar: this.toolbar,
                  //高度
                  height: 500,
                  //图片上传
                  images_upload_handler: function (blobInfo, success, failure) {
                      //文件上传的formData传递，忘记为什么要用这个了
                      let formData = new FormData();
                      formData.append('file', blobInfo.blob(), blobInfo.filename());
                      //上传的api,和后端配合，返回的是图片的地址，然后加上公共的图片前缀
                      that.$api.system.uploadImage(formData).then(res=>{
                          var url = "tt"//Global.baseUrlImg + res;
                          console.log(url)
                          success(url)
                      }).catch(res => {
                          failure('图片上传失败')
                      });
                  }
                }
            }
        },
        methods:{

        },
        watch: {
            //监听内容变化
            value(newValue) {
                this.myValue = newValue
            },
            myValue(newValue) {
                this.$emit('input', newValue)
            }
        }
    }
</script>
<style>

    .tox-notifications-container{
        display: none;
    }
    /*在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。*/

.tox.tox-silver-sink.tox-tinymce-aux{ z-index: 2100 !important; } 

</style>

<template>
  <div>
    <TinymceEditor :value="content" @input="newContent"></TinymceEditor>
  </div>
</template>

<script>
import TinymceEditor from "@/components/tinymce/index.vue"
export default {
    components: {
        TinymceEditor
    },
    data() {
        return {
            content:""
        }
    },
    methods: {
    //获取富文本的内容
    newContent(val){
        this.$set(this.currInfo,"content",val);
    }
  }
}
</script>

    mounted: function () {
        this.element = this.$el;
        if (getTinymce() !== null) {
            initialise(this)();
        }
        else if (this.element && this.element.ownerDocument) {
            var channel = this.$props.cloudChannel ? this.$props.cloudChannel : '5';
            var apiKey = this.$props.apiKey ? this.$props.apiKey : 'no-api-key';
            var scriptSrc = isNullOrUndefined(this.$props.tinymceScriptSrc) ?
                "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js" :
                this.$props.tinymceScriptSrc;
            //ScriptLoader.load(this.element.ownerDocument, scriptSrc, initialise(this));
            ScriptLoader.load(this.element.ownerDocument, "static/tinymce/tinymce.min.js", initialise(this));
        }
    },