vue中使用Tinymce

1、安裝tinymce編輯器

npm i tinymce
npm i @tinymce/tinymce-vue

或：

yarn add tinymce

yarn add @tinymce/tinymce-vue

2、配置中文語言包

地址：中文語言包

註：最好將語言包放在public/langs/或static/langs/目錄下，下麵組件將會引用

3、封裝組件

在components 目錄下新建 tinymce.vue 

<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: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize formatpainter',
        },
        //工具欄
        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: {
                //漢化,路徑是自定義的
                language_url: '/tinymce/langs/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>

4、引用組件

新建test.vue

<template>
    <div>
        <TinymceEditor :value="content" @input="newContent"></TinymceEditor>
    </div>
</template>
  
<script>
import TinymceEditor from "./components/tinymce.vue"
export default {
    components: {
        TinymceEditor
    },
    data() {
        return {
            content: ""
        }
    },
    methods: {
        // 獲取富文本的內容
        newContent(val) {
            this.content = val; // 直接更新 content 屬性
        }
    }
}
</script>

註：文件引入路徑是關鍵