vue实现wangEditor 5封装

基于wangEditor 5实现一个简单的富文本编辑器组件，实现自定义上传图片及视频。

1. 效果截图 2. 依赖安装

npm i @wangeditor/editor --save
npm i @wangeditor/editor-for-vue --save

3. 组件代码实现

<template>
    <div class="editor-wrapper">
        <toolbar
            :editor="editor"
            :default-config="toolbarConfig"
            :mode="mode"
        />
        <editor
            v-model="html"
            :style="{height: height + 'px'}"
            :default-config="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
        />
        <div v-if="maxlength" class="useful-num">
            {{ useLen }}/{{ maxlength }}
        </div>
    </div>
</template>

<script>
import fileApi from '@/api/file';
import '@wangeditor/editor/dist/css/style.css';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';

export default {
    name: 'customEditor',
    components: {
        Editor,
        Toolbar
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        maxlength: {
            type: Number,
            default: 0
        },
        height: {
            type: [String, Number],
            default: 300
        }
    },
    watch: {
        value(val) {
            this.html = val;
        }
    },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: { },
            editorConfig: {
                placeholder: '请输入内容',
                MENU_CONF: {
                    uploadImage: {
                        // 自定义图片上传功能
                        customUpload: (resultFile, insertImgFn) => {
                            const formData = new FormData();
                            formData.append('file', resultFile);
                            // 将文件上传至服务器，res.data返回服务器存放文件的url
                            fileApi.postFileUpload(formData).then(res => {
                                // 插入图片，三个参数分别对应，url alt href
                                insertImgFn(res.data, '', res.data);
                            });
                        }
                    },
                    uploadVideo: {
                        // 自定义视频上传功能
                        customUpload: (resultFile, insertImgFn) => {
                            const formData = new FormData();
                            formData.append('file', resultFile);
                            // 将文件上传至服务器，res.data返回服务器存放文件的url
                            fileApi.postFileUpload(formData).then(res => {
                                // 插入视频，三个参数分别对应，url alt href
                                insertImgFn(res.data, '', res.data);
                            });
                        }
                    }
                }
            },
            mode: 'default', // or 'simple'
            useLen: 0
        };
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },
        onChange() {
            const text = this.editor.getText();
            // 计算当前输入了多少文字
            this.useLen = (text || '').length;
            // 每次富文本内容改变，触发change事件
            this.$emit('change', this.html);
        }
    },
    beforeDestroy() {
        // editor销毁
        const editor = this.editor;
        if (editor == null) {
            return;
        }
        editor.destroy();
    }
};
</script>

<style lang="scss" scoped>
    .editor-wrapper{
        z-index: 3;
        position: relative;     
        /deep/.w-e-toolbar{
            z-index: 2!important;
            border: solid 1px #E6E9EC!important;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            .w-e-bar-item{
                padding: 1px;
            }
        }
        /deep/.w-e-text-container{
            z-index: 1!important;
            border: solid 1px #E6E9EC!important;
            border-top: none!important;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }
    }
    .useful-num{
        position: absolute;
        right: 6px;
        bottom: 10px;
        z-index: 99999;
        font-size: 12px;
        color: $text-3;
        background: #fff;
        padding: 0 6px;
        height: 28px;
        line-height: 28px;
    }
</style>

3. 组件使用

<template>
    <editor
        v-model="html"
        :maxlength="8192"
        @change="change"
    />
</template>

<script>
import Editor from '@/components/Editor';
export default {
    name: 'EditorExample',
    components: {
        Editor
    },
    data() {
        return {
            html: ''
        };
    },
    methods: {
        change(val) {
            console.log(val);
        }
    }
};
</script>

更多配置参考官网：www.wangeditor.com/v5/getting-…