初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

在开发中，特别是后台管理，富文本是常用的，今天我们来看下vue中使用富文本编辑器–wangeditor&修改文本区域默认高度&不展示本地图片上传按钮解决方案。

之前发布过在react中的使用方法，有兴趣的可以看下：https://blog.csdn.net/qq_42817227/article/details/101059475

1、安装

cnpm i wangeditor -D

2、代码实现：

<template>
   <div class="page">
       <div id="wangeditor" ref="wangeditor">
            <div id="editor" ref="editorElem" style="text-align:left;"></div>
       </div>
    </div> 
</template>

import Edit from "wangeditor";

data() {
    return {
       editor: null,
       editorContent: ''
    };
}

// 因为是demo，直接写在了mounted 里
mounted () {
    this.editor = new Edit(this.$refs.editorElem);
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = html => {
        this.editorContent = html;
        console.log(html)
    };
    this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
    ];
    this.editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    this.editor.create(); // 创建富文本实例
},

修改文本区域默认高度

1、找到安装的源文件：node_modules/wangeditor/release/wangEditor.js

2、修改高度

不展示本地图片上传按钮解决方案

默认情况下，编辑器不会显示“上传图片”的tab，因为你还没有配置上传图片的信息。

配置base64或者上传服务器都可以，具体可看官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335780

// 以base64为例
editor.customConfig.uploadImgShowBase64 = true;

文章到此结束，喜欢可以点个赞噢~