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

官网说明

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

npm install @tinymce/tinymce-vue --save
npm install tinymce/tinymce --save

如果是用的yarn,就是:

yarn add @tinymce/tinymce-vue
yarn add tinymce/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>

以上代码生产可用,数字江湖异志录品质保证,点赞+关注轻松获取干货.