vue - element-admin 富文本編輯器 tinyMce

參考TinyMce中文文檔
因為要使用TinyMce圖片批量上傳插件，如果使用npm導入tinyMce會無法使用，所以得另外導入應用
1.下載tinyMce 放入 assets文件夾中


2.新建公用組件tinymce.vue

//views/Public/tinymce.vue
<template>
    <div class="tinymce-box">
        <div id="tinymce" :key="tinymceFlag"></div>
    </div>
</template>

<script>
export default {
    name: 'tinymce',
    props: {
        value: {
            type: String,
            default: '',
        },
        height: {
            type: Number,
            default: 900,
        },
    },
    data() {
        return {
            tinymceFlag: 1, //是防止組件緩存導致編輯器不能正常使用，每次切換來都更改key,使其重新渲染
        };
    },
    mounted() {
        this.init();
    },
    created() {},
    methods: {
        init() {
            tinymce.init({
                selector: '#tinymce',
                language: 'zh_CN',
                paste_data_images: false,
                paste_enable_default_filters: false,
                convert_fonts_to_spans: false, // 轉換字體元素為SPAN標簽，默認為true
                lineheight_val: '1 1.5 1.6 1.75 1.8 2 3 4 5',
                language_url: 'tinymce/langs/zh_CN.js',
                language: 'zh_CN',
                skin_url: 'tinymce/skins/ui/oxide',
                // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
                font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
                height: this.height,
                forced_root_block: 'p',
                plugins: 'lists image axupimgs media table wordcount axupimgs lineheight hr link anchor pagebreak emoticons code preview paste ',
                toolbar: 'code preview paste formatselect  fontselect  ｜ undo redo |  fontsizeselect | lineheight | bold italic underline strikethrough subscript superscript forecolor backcolor blockquote  bullist numlist | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat hr link anchor pagebreak lists image axupimgs media table formatpainter ',
                branding: false,
                fontsize_formats: '10px 11px 12px 14px 15px 16px 18px 24px 36px',
                menubar: 'file edit insert view format table tools help',
                //清除格式
                paste_auto_cleanup_on_paste: true,
                paste_remove_styles: true,
                paste_remove_styles_if_webkit: true,
                paste_strip_class_attributes: true,
                // 如需ajax上傳可參考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
                images_upload_handler: (blobInfo, success, failure) => {
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '接口地址');
                    formData = new FormData();
                    formData.append('upfile', blobInfo.blob());
                    formData.append('type', 'image');
                    xhr.onload = function (e) {
                        var json;
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(this.responseText);
                        if (!json || typeof json.url != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        success(json.url);
                    };
                    xhr.send(formData);
                },
            });
           //解決渲染速度快慢
            setTimeout(() => {
                tinymce.editors['tinymce'].setContent(this.value);
            }, 1000);
        },
        getData() {
            let data = tinymce.editors['tinymce'].getContent();
            this.$emit('data', data);
        },
    },
    watch: {
        value(val) {
            tinymce.editors['tinymce'].setContent(val);
        },
    },
    activated() {
        // 每次都給編輯器改變不同的key值使其每次切換頁面都重新加載
        this.tinymceFlag++;
    },
    beforeDestroy() {
        tinymce.editors['tinymce'].destroy();
    },
};
</script>
<style scoped></style>

3.使用多圖片批量上傳
[圖片批量上傳]（http://tinymce.ax-z.cn/more-plugins/axupimgs.php）


4. public下面也塞一下tinymce