vue tiny编辑器配置

/*
编辑器 页面上使用：
 <Editor id="tinymce" v-model="ruleForm.body" :init="editorInit"></Editor>
data() {
      return {
        tinymceHtml:'',
      }
    }
*/
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/fullscreen";
import galleryPlugin from 'md-element-ui/packages/editor/src/plugins/gallery/plugin';

export default {
    data() {
        return {
            galleryPluginInstance: null,
            editorInit: {
                content_css: false,
                language_url: (window.staticResourceURLPrefix || '') + "/tinymce/langs/zh_CN.js", // 语言包的路径
                language: "zh_CN", //语言
                skin_url: (window.staticResourceURLPrefix || '') + "/tinymce/skins/ui/oxide", // skin路径
                width: 900,
                height: 500, //编辑器高度
                branding: false, //是否禁用“Powered by TinyMCE”
                menubar: false, //顶部菜单栏显示
                plugins: "link lists code table colorpicker textcolor wordcount contextmenu gallery fullscreen",
                toolbar: "bold italic  underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat | gallery fullscreen",
                toolbar_drawer: false,
                content_style: '.mce-content-body img { max-width: 100%; }',
                images_upload_url: "/demo/upimg.php",
                images_upload_base_path: "/demo",
                fontsize_formats: '11px 12px 13px 14px 15px 16px 18px 24px 36px 48px'
            }
        };
    },
    components: { Editor },
    methods: {
        galleryToolbarClickHandler() {
            this.$data.isForPickUpCover = false;
            this.$refs.pictureGallery.open();
        },

        formatImages(list = []) {
            let result = [];
            for (let [index, image] of list.entries()) {
                result[index] = {
                    src: {
                        value: image.imgurl
                    },
                    dimensions: {
                        width: 'auto',
                        height: 'auto'
                    },
                    hspace: image.imgwidth,
                    vspace: image.imgheight,
                    border: 0,
                    borderStyle: '',
                    caption: false,
                    classes: '',
                    style: '',
                    alt: '',
                    title: ''
                };
            }
            return result;
        },

        installGalleryPlugin() {
            let self = this;
            if (self.$data.editorInit.plugins.indexOf('gallery') !== -1) {
                galleryPlugin.install(function() {
                    self.galleryToolbarClickHandler();
                });

                self.$data.galleryPluginInstance = galleryPlugin;
            }
        },

        addImagesToEditor(images) {
            this.$data.galleryPluginInstance &&
                this.$data.galleryPluginInstance.insertIntoEditor(this.formatImages(images));
        }
    }
};