wangeditor的使用

wangeditor的使用

<template>
    <div style="width: 100%;height: 500px">
        <div
            class="mo-wang-editor"
            ref="editor"
        ></div>
    </div>
</template>

<script>
    import wangEdit from 'wangeditor'; //得先npm i wangeditor --save
    export default {
        name: "index",
        model: {
            prop: 'value',
            event: 'change',
        },
        data(){
            return {
                value:'',
                placeholder:'',
                height:500,
                editor:null,
                //配置富文本编辑器的菜单栏
                menu:[
                    'undo', // 撤销
                    'redo', // 重复
                    'head', // 标题
                    'bold', // 粗体
                    'fontSize', // 字号
                    'fontName', // 字体
                    'italic', // 斜体
                    'underline', // 下划线
                    'strikeThrough', // 删除线
                    'indent', // 缩进
                    'lineHeight', // 行高
                    'foreColor', // 文字颜色
                    'backColor', // 背景颜色
                    'link', // 插入链接
                    'list', // 列表
                    'todo', // 待办
                    'justify', // 对齐方式
                    'quote', // 引用
                    'emoticon',
                    'image', // 插入图片
                    'video', // 视频
                    'table',  // 表格
                    'code',  // 插入代码
                    'splitLine', // 分割线
                ]
            }
        },
        watch:{
            value(val){
                // 如果值不相等再进行赋值，避免多次赋值造成闪烁
                if(this.editor && val !== this.editor.txt.html()){
                    this.editor.txt.html(val)
                }
            },
        },
        methods:{
            initEditor(){
                const editor = new wangEdit(this.$refs.editor);
                editor.config.placeholder = this.placeholder;
                editor.config.height = this.height;
                editor.config.menus = this.menu;
                //实现上传视频
                editor.config.customUploadVideo = this.handleUploadVideo;

                // 限制类型
                // editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
                editor.config.uploadImgMaxLength = 1; // 一次最多上传 5 个图片

                //监听数据变化
                editor.config.onchange = this.handleContentChange;
                //上传图片
                editor.config.customUploadImg = this.handleUploadImage;

                // 创建编辑器
                editor.create();
                // 赋予初始值
                editor.txt.html(this.value);

                this.editor = editor;

            },
            handleContentChange(newHtml){
                this.$emit('change',newHtml);
            },

            /**
             * resultFiles 是 input 中选中的文件列表
             * insertImgFn 是获取图片 url 后，插入到编辑器的方法
             */
            async handleUploadImage(resultFiles, insertImgFn){
                const imgUrl = await this.getObjectURL(resultFiles[0]);
                // 上传图片，返回结果，将图片插入到编辑器中
                insertImgFn(imgUrl)
            },

            async handleUploadVideo(resultFiles, insertVideoFn){
                const videoUrl = await this.getObjectURL(resultFiles[0]);
                // 上传视频，返回结果，将视频插入到编辑器中
                insertVideoFn(videoUrl)
            },

            /**
             * 将file对象或blob对象转url
             * ref: https://www.cnblogs.com/linxue/p/9469715.html
             */
            getObjectURL(obj) {
                var url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(obj);
                } else if (window.URL != undefined) {
                    // mozilla(firefox)
                    url = window.URL.createObjectURL(obj);
                } else if (window.webkitURL != undefined) {
                    // webkit or chrome
                    url = window.webkitURL.createObjectURL(obj);
                }
                return url;
            },

        },
        mounted() {
            this.initEditor()
        },
        beforeDestroy() {
            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy();
            this.editor = null;
        }
    }
</script>

<style lang="scss" scoped>
    .mo-wang-editor {
    // 工具栏icon
       .w-e-toolbar .w-e-menu {
           width: 30px;
           height: 30px;
           font-size: 12px;
       }

    // 工具栏提示文字
       .w-e-menu-tooltip {
           font-size: 12px;
       }

    // 工具栏边框
       .w-e-toolbar {
           border: 1px solid #dcdfe6 !important;
           border-bottom: none !important;
       }

    // 编辑区域边框
       .w-e-text-container {
           border: 1px solid #dcdfe6 !important;
       }

    // 默认提示文字
       .w-e-text-container .placeholder {
           font-size: 12px;
           color: #c1c5cd;
       }

    // 上传按钮
       .w-e-menu .w-e-panel-container .w-e-up-img-container .w-e-up-btn {
           width: 100%;
           height: 64px;
           line-height: 64px;
           font-size: 24px;
       }
    }

</style>