vue + TinyMCE实现富文本编辑器

首先下载依赖

npm install tinymce --save
yarn add tinymce

然后我们可以封装一个方法，以便于我们调用，这里我还加入了图片的上传，假设这个文件是utils/article

import { uploadMessageImg } from "@/api/message";
export const editorInit = {
    language: "zh_CN",
    height: "600px",
    convert_urls: false,
    branding: false,
    plugins: [
        "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount axupimgs"
    ],
    toolbar: [
        "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote  removeformat subscript superscript code codesample",
        // "hr bullist numlist link image charmap pagebreak insertdatetime fullscreen axupimgs",
        'fontselect | fontsizeselect  | forecolor backcolor'
    ],
    images_upload_handler: function (blobInfo, success, failure) {
        const formData = new FormData();
        formData.append("file", blobInfo.blob());
        uploadMessageImg(formData)
            .then(res => {

                console.dir(res)
                const { code, data } = res
                if (code == 200) {
                    success('地址' + data.id);
                } else {
                    success()
                }

            })
            .catch(() => {
                failure("上传失败，请重新上传");
            });
    }
};

然后使用

<template>
    <editor v-model="form.docText" :init="editorInit" />
</template>

<script>
import Editor from '@tinymce/tinymce-vue';
import { editorInit } from '@/utils/article';
export default {
    components: {
        Editor,
    },
    data:{
        form:{},
        editorInit
    },
    methods:{
    }
}
</script>

大家可以参考一下中文文档：TinyMCE中文文档中文手册