(快速浏览杰哥分享过的所有经验汇总，点击跳转）

富文本框，是个天坑！真TM坑，找了好久才找到个国产的靠谱的讲人话的。

0简介

国产东西，看得懂，容易用，文档简单

官方体验地址：http://www.wangeditor.com/

（我就不放我自己的，因为会图片要上传服务器，试用的话会浪费很多空间）

官方手册：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

1安装：

npm install wangeditor --save

2服务器准备好了上传接口

2.1我加了一个表，去记录上传日志

（这个记录没什么特别用途，可以忽略）

此主题相关图片如下：1.png

效果：

此主题相关图片如下：2.png

2.2狐表接受文件代码：

记得开异步。这里的代码是配合我之前发的d2admin连着用，并不能无脑拷贝，或者你要自己看懂，自己改造

方法名称：UploadPic

代码：

3建立组件

新建一个独立的vue页面做富文本框组件

此主题相关图片如下：3.png

4开始使用组件

在你的业务vue页面里，

//js里
import wEditor from \'@/components/wangEditor/wangEditor.vue\'

//html
<wEditor v-model="form.Content" />

效果：

此主题相关图片如下：4.png

服务器接收的文件效果：

此主题相关图片如下：5.png

5增加可选参数

在组件的props代码里，看到预留了几个接口

//高度案例

<wEditor v-model="form.Content" :textHeight="\'400px\'" />

//只读案例

<wEditor v-model="form.Content" :read />

此主题相关图片如下：6.png