TinyMCE富文本编辑器

安装tinymce-vue

npm install @tinymce/tinymce-vue -S

下载tinymce

npm install tinymce -S

下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到public下新建的文件夹tinymce里，在下载中文语音包中文语音包

下载完解压之后的结构是：

封装一个Editor的组件:

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick">
    </editor>
  </div>
</template>

<script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/icons/default'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/textcolor'
    import 'tinymce/plugins/fullscreen'

    import {uploadFile} from "@/utils/api";

    export default {
        components: {
            Editor
        },
        props: {
            value: {
                type: String,
                required: false
            },
            triggerChange: {
                type: Boolean,
                default: false,
                required: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            plugins: {
                type: [String, Array],
                default: 'lists image media table textcolor wordcount contextmenu fullscreen'
            },
            toolbar: {
                type: [String, Array],
                default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat | fullscreen'
            },
        },
        data() {
            return {
                //初始化配置
                init: {
                    language_url: '/tinymce/langs/zh_CN.js',
                    skin_url: '/tinymce/skins/ui/oxide',
                    language: 'zh_CN',
                    height: 500,
                    plugins: this.plugins,
                    toolbar: this.toolbar,
                    branding: false,
                    menubar: false,
                    images_upload_handler: (blobInfo, success) => {
                        console.log(blobInfo)
                        let bl = blobInfo.blob();
                        if (!this.isEmpty(blobInfo.filename())) {
                            if(bl.size >  1024 * 1024 ){
                                this.$message.warn('图片大于1兆,请重试')
                                return;
                            }
                            var form = new FormData()
                            form.append("file", bl, blobInfo.filename())
                            form.append("type","store")
                            uploadFile(form,{
                                'Content-Type':'multipart/form-data'
                            }).then((res)=>{
                                if(res.success){
                                    success('data:image/jpeg;base64,' + blobInfo.base64())
                                }
                            })
                        } else {
                            success('data:image/jpeg;base64,' + blobInfo.base64())
                        }
                    }
                },
                myValue: this.value
            }
        },
        mounted() {
            tinymce.init({})
        },
        methods: {
            onClick(e) {
                this.$emit('onClick', e, tinymce)
            },
            //可以添加一些自己的自定义事件，如清空内容
            clear() {
                this.myValue = ''
            },
            /**
             * 将以base64的图片url数据转换为Blob
             */
            convertBase64UrlToBlob(urlData) {
                var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type: mime});
            },
        },
        watch: {
            value(newValue) {
                this.myValue = newValue
            },
            myValue(newValue) {
                if (this.triggerChange) {
                    this.$emit('change', newValue)
                } else {
                    this.$emit('input', newValue)
                }
            }
        }
    }

</script>
<style scoped>
</style>

在需要用的地方直接引用

这样就直接出来了

注： import ‘tinymce/icons/default’ 这个非常重要，因为版本高的原因结构变了，不引用的话默认图标是出不来的