「插件」富文本编辑器wangeditor

1:安装

cnpm install wangeditor --save

2:使用

//html
<div ref="toolbar" class="w-e-toolbar"></div>
<div ref="editor" class="w-e-text-container"></div>
//js
import E from "wangeditor";
mounted() {
    const editor = new E(this.$refs.toolbar, this.$refs.editor);
    editor.customConfig.zIndex = 100
    //配置上传图片
       editor.customConfig.uploadImgServer = 'http://localhost:3002/api/upload/editor/';
    editor.customConfig.uploadFileName = 'file';
    // 配置header信息
    editor.customConfig.uploadImgHeaders = {
    Authorization: `Bearer ${sessionStorage.token}`
    };
    //同步HTML代码至data
    editor.customConfig.onchange = html => {
            this.form.detail = html;
     };
    editor.create();
},
//css
.w-e-toolbar {
    border: 1px solid #ccc;
    border-bottom: 0;
}
.w-e-text-container {
    border: 1px solid #ccc;
    min-height: 1500px;
    height: 1500px;
}
posted @ 2021-03-17 11:26  昔不亏  阅读(152)  评论(0)    收藏  举报