vue富文本編輯器（tinymce-vue）

1. 安裝插件

"@tinymce/tinymce-vue": "^3.2.8",

cnpm i -S @tinymce/tinymce-vue

2. 定義插件

• src/components/the-editor.vue

<style lang="scss">
    .tox-tinymce-aux {
        z-index: 99999 !important;
    }
</style>


<template>
    <tinymce-vue v-model="value" :api-key="key" :init="init" @onChange="onChange"></tinymce-vue>
</template>

<script>
    import TinymceVue from '@tinymce/tinymce-vue'
    export default {
        components: { TinymceVue },
        props: {
            value: { default: '' }
        },
        data() {
            return {
                flag: false,
                key: 'rbleek5lg9bxd4q81tj70a5xe88kwoe5bk01sio1oyb8mde8',
                init: {
                    height: 500,
                    language: 'zh_CN',
                    language_url: 'tinymce/language/zh_CN.js',
                    // menubar: false,
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table paste code help wordcount'
                    ],
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                    automatic_uploads: true,
                    file_picker_types: 'file image media',
                    file_picker_callback: callback => {
                        var self = this;
                        var input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.click();
                        input.onchange = function () {
                            var file = this.files[0];
                            let formData = new FormData()
                            formData.append('file', file)
                            self.$post(process.env.VUE_APP_UPLOAD_URL, formData).then(res => {
                                if (!res.status) {
                                    self.$notify.err(res.message || '上傳失敗')
                                    return
                                }
                                callback(res.data.url)
                            })
                        }
                    },
                    images_upload_handler: (b, succ, fail) => {
                        let formData = new FormData()
                        formData.append('file', b.blob())
                        this.$post(process.env.VUE_APP_UPLOAD_URL, formData).then(res => {
                            if (!res.status) {
                                fail(res.message || '上傳失敗')
                                return
                            }
                            succ(res.data.url)
                        })
                    }
                },
            }
        },
        methods: {
            onChange() {
                this.$emit('input', this.value)
            }
        }
    }
</script>

3. 中文語言文件

下載 中文語言文件放到 public/tinymce/language/zh_CN.js

4. 定義圖片、文件上傳地址

在 .env 文件中定義 VUE_APP_UPLOAD_URL 爲上傳地址

5. 使用組件

<template>
	<el-form-item prop="content" label="素材內容">
    	<the-editor v-model="form.content"></the-editor>
	</el-form-item>
</template>

import TheEditor from "@/components/the-editor"
export default {
        components: { TheEditor },
}