tinymce富文本

tinymce相比wangEditor是一个功能多一点的富文本。

在vue中引入文件，也可以直接去官网下载，下载文件网址是  https://www.tiny.cloud/get-tiny/self-hosted/

npm install tinymce -S  
npm install @tinymce/tinymce-vue -S  

 在官网下载语言包 https://www.tiny.cloud/get-tiny/language-packages/

目录结构

然后写个组件插入，在页面引用就好了

<template>
    <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor>
</template>

<script>
import tinymce from "../../static/tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";

// 主题
import "../../static/tinymce/themes/silver/theme";
// icons
import "../../static/tinymce/icons/default"

// 插件
import '../../static/tinymce/plugins/textcolor'
import '../../static/tinymce/plugins/advlist'
import '../../static/tinymce/plugins/table'
import '../../static/tinymce/plugins/lists'
import '../../static/tinymce/plugins/paste'
import '../../static/tinymce/plugins/preview'
import '../../static/tinymce/plugins/fullscreen'

import '../../static/tinymce/plugins/image'
import '../../static/tinymce/plugins/media'
import '../../static/tinymce/plugins/link'
import '../../static/tinymce/plugins/code'
import '../../static/tinymce/plugins/contextmenu'
import '../../static/tinymce/plugins/wordcount'
import '../../static/tinymce/plugins/colorpicker'
import '../../static/tinymce/plugins/autosave'
import '../../static/tinymce/plugins/indent2em'
import '../../static/tinymce/plugins/lineheight'


export default {
    components: {
        Editor
    },
    model: {
        prop: 'htmlContent',
        event: 'change'
    },
    props: {
        htmlContent: String
    },
    watch: {
        htmlContent(val) {
            if (val !== this.content) {
                this.content = val
            }
        },
        content(val) {
            this.$emit('change', val)
        }
    },
    data() {
        return {
            publicPath: 'static/',
            tinymceInit: {},
            tinymceFlag: 1,
            content: ''
        }
    },
    created() {
        const that = this
        this.tinymceInit = {
            skin_url: `${this.publicPath}tinymce/skins/ui/oxide`,
            content_css: `${this.publicPath}tinymce/skins/content/default/content.css`,
            language_url: `${this.publicPath}tinymce/langs/zh_CN.js`,
            language: 'zh_CN',
            height: document.body.offsetHeight - 300,
            browser_spellcheck: true, // 拼写检查
            branding: false, // 去水印
            // elementpath: false,  //禁用编辑器底部的状态栏
            statusbar: false, // 隐藏编辑器底部的状态栏
            paste_data_images: true, // 允许粘贴图像
            // menubar: false, // 隐藏最上方menu
            paste_retain_style_properties: 'all',
            paste_word_valid_elements: '*[*]',        // word需要它
            paste_convert_word_fake_lists: false,     // 插入word文档需要该属性
            paste_webkit_styles: 'all',
            allow_html_in_named_anchor: false,
            autosave_ask_before_unload: true, //弹窗提示保存
            autosave_interval: '30s', //自动保存草稿时间-只支持s-秒单位
            autosave_retention: '120m', //草稿有效时间-只支持m-分钟单位
            autosave_restore_when_empty: false,
            plugins: 'advlist table lists paste preview fullscreen image link contextmenu wordcount code colorpicker media autosave indent2em lineheight',
            toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough lineheight indent2em | alignleft aligncenter alignright alignjustify | quicklink  blockquote table numlist bullist |image media link contextmenu wordcount code colorpicker preview fullscreen restoredraft',
            font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif,Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
            images_upload_handler: function (blobInfo, success, failure) {
                // 这个函数主要处理word中的图片，并自动完成上传;
                // blobInfo.blob() 得到图片的file对象
                const file = blobInfo.blob()
                var form = new FormData()
                form.append('displayName', file.name)
                form.append('busiType', 'img')
                form.append('file', file)
                that.ajax.post('/file/upload', form, { 'Content-Type': 'multipart/form-data' }).then(data => {
                    if (data.fileUrl) {
                        success(data.fileUrl)
                    } else failure('ERROR: ' + data.msg);
                })
            },
            file_picker_types: "media",
            file_picker_callback: function (callback, value, meta) {
                //文件分类
                var filetype = '.mp3, .mp4';
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', filetype);
                input.click();
                input.onchange = function () {
                    var file = this.files[0];
                    console.log(file.name);
                    var form = new FormData()
                    form.append('displayName', file.name)
                    form.append('busiType', 'video')
                    form.append('file', file)
                    that.ajax.post('/file/upload', form, { 'Content-Type': 'multipart/form-data' }).then(data => {
                        if (data.fileUrl) {
                            callback(data.fileUrl);
                        } else {
                            that.$message.error(data)
                        }
                    })

                }
            },
            /**
             * 渲染前
             */
            setup: (editor) => {
                // editor.ui.registry.addButton('imageUpload', {
                //     // text: '插入图片',
                //     tooltip: '插入图片',
                //     icon: 'image',
                //     onAction: () => {
                //         const upload = that.$refs.imageUpload
                //         upload.handleClick()
                //     }
                // })
            }
        }
    },
    methods: {

    },
}
</script>

效果