主题：[免费开源]wangEditor富文本框解决方案,粘贴自动上传图片（截图上传神器啊！）,可嵌入视频，vue和jquery的BS框架都能用，不能用在cs哦！

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

富文本框，是个天坑！真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代码里，看到预留了几个接口

参数名	类型	作用	参考案例
readOnly	Boolean	是否只读，默认false	:read
uploadImgMaxSize	Number	最大图片尺寸MB，默认1m	:uploadImgMaxSize="1"
uploadImgMaxLength	Number	最多一次上传图片数量，默认6张	:uploadImgMaxLength="1"
textHeight	String	文本框高度，默认300px	:textHeight="'400px'

//高度案例

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

//只读案例

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

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

多谢分享。不过很对人可能还是不会用

多谢分享

多谢分享

多些楼主分享这些对FT结合BS开发非常有用的思路和方法。

楼主慧眼识金，这款富文本编辑器确实是简单好用，之前给公司做过内部新闻资讯类项目，试用了N多款编辑器，最后就用了WangEditor，图片新闻，视频新闻、消息报道之类的效果杠杠的，媲美专业大站新闻效果。个人最欣赏它的图片上传回显功能，上传完毕马上引用新地址原位回显，编辑完成，保存OK。

谢谢分享

谢谢分享！

浮动固定反攻倒算