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>

效果