今天系统需要集成富文本编辑器,选型了之前很喜欢的TinyMCE编辑器,心想着以前封装过一次,再来一遍那还不容易,结果因为TinyMCE从我上次使用后更新过很多版本了(尤其是tiny.cloud的cdn访问),有些配置也不一样了,特此记录一下完整的集成过程.

官网说明

TinyMCE官方提供了封装好的TinyMCE Vue组件,但是如果不进行一些额外设定的话,默认其加载的是tiny.cloud下的CDN资源(js,css),我们先把包下载下来:

npm install @tinymce/tinymce-vue --save

npm install tinymce --save

如果是用的yarn,就是:

yarn add @tinymce/tinymce-vue

yarn add tinymce

好了,以上就是本文的全部内容,感谢收看(:dog),下面直接上代码,多的不说了,读者自行领悟就好.

封装好的Vue组件

这里为了让编辑器展示一个只读样式,做了少许额外的配置.

<template>

    <div :class="{readonly: readonly}">

        <editor :disabled="readonly" v-model="tinymceHtml" @onChange="handleChange" :init="initConfig"></editor>

    </div>

</template>

<script>

import tinymce from "tinymce/tinymce";

import Editor from "@tinymce/tinymce-vue";

import "tinymce/icons/default";

import "tinymce/themes/silver";

import "tinymce/skins/ui/oxide/skin.min.css";

import "tinymce/skins/ui/oxide/content.min.css";

import "tinymce-i18n/langs/zh_CN";

import "tinymce/plugins/autoresize";

import "tinymce/plugins/link";

import "tinymce/plugins/table";

import "tinymce/plugins/lists";

import "tinymce/plugins/wordcount";

import "tinymce/plugins/preview";

export default {

    props: ["html", "height", "readonly"],

    components: { Editor },

    data() {

        return {

            tinymceHtml: "",

            initReadonly: {

                language: "zh_CN",

                skin: false,

                content_css: false,

                content_style: "*{font-size:14px;}",

                resize: false,

                statusbar: false,

                plugins: "autoresize",

                toolbar: false,

                menubar: false,

                branding: false,

                readonly: true,

                body_class: "rich-content"

            },

            init: {

                language: "zh_CN",

                skin: false,

                content_css: false,

                resize: false,

                statusbar: false,

                plugins: "link lists image media code table wordcount  preview",

                toolbar:

                    "preview | bold italic underline | fontsizeselect | forecolor backcolor | undo redo  | alignleft aligncenter alignright alignjustify | bullist numlist | link unlink | blockquote | removeformat",

                fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",

                menubar: false,

                branding: false,

            }

        };

    },

    computed: {

        initConfig: function() {

            var config = this.readonly ? this.initReadonly : this.init;

            config.height = this.height ? this.height : 300;

            return config;

        }

    },

    watch: {

        html(val) {

            this.tinymceHtml = val;

        }

    },

    mounted() {

        this.tinymceHtml = this.html;

        tinymce.init({});

    },

    methods: {

        handleChange() {

            this.$emit("update:content", this.tinymceHtml);

        }

    }

};

</script>

<style lang="less" scoped>

.readonly {

    /deep/.tox-tinymce {

        border: none;

    }

}

.tinymce > div {

    border-top-width: 0px !important;

}

</style>