vue中使用tinymce

之前使用了好几种引用tinymce的方式都已失败而告终，也找原因了。因为下面这个还是成功了，记录一下

 

1、引用tinymce-vue

npm i @tinymce/tinymce-vue -S

2、封装控件

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

 

3、引用

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

 

4、控件tinymce-vue引用的插件会从网络上下载，如：

     https://cdn.tiny.cloud/1/no-api-key/tinymce/5.10.6-132/plugins/advlist/plugin.min.js

     如果没有外网的话，可以找到文件@tinymce\tinymce-vue\lib\es2015\main\ts\components\Editor.js

     将ScriptLoader.load(this.element.ownerDocument, scriptSrc, initialise(this));

     改为红色部分

     再安装tinymce 

     npm i tinymce@5.3.1 -S

     并将node_model下的tinymce 拷贝到static文件夹下（static文件夹和src同级）

    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));
        }
    },