vue中使用富文本编辑器--wangeditor&修改文本区域默认高度&不展示本地图片上传按钮解决方案

初心-杨瑞超个人博客诚邀您加入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;

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