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

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

我要说几句：

1支持粗体、斜体、字体颜色、表情等等之类，比较常见的word编辑

2支持图片多张上传

3支持图片直接从粘贴Ctrl+V，就像你用微信截图那样，截图完了就能直接发，不用特意再存本地！

4图片上传直接自动转base64存数据(代码简单但不推荐，很快会压死你的数据库)，也支持传服务器，也支持传七牛云等网盘

5支持视频iframe插入，很简单无脑的

6支持js、jquery、vue、react等bs模式。不支持狐表的CS模式，不是我不想支持，这富文本框从诞生就是给bs用的，很多js和css方法，压根无法拿到cs用。不要在cs里折腾富文本框，坑你坑到家，转BS吧

7必须ie10+或谷歌浏览器之类的现代浏览器

8富文本框非常多坑...非刚需别折腾...

0简介

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

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

1安装：

npm install wangeditor --save

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

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

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

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

效果：

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

2.2狐表接受文件代码：

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

方法名称：UploadPic

代码：

以下内容只有回复后才可以浏览

3建立组件

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

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

以下内容只有回复后才可以浏览

4开始使用组件

在你的业务vue页面里，//js里

importwEditor from'@/components/wangEditor/wangEditor.vue'//html

效果：

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

服务器接收的文件效果：

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

5增加可选参数

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

参数名类型作用参考案例

readOnlyBoolean是否只读，默认false:read

uploadImgMaxSizeNumber最大图片尺寸MB，默认1m:uploadImgMaxSize="1"

uploadImgMaxLengthNumber最多一次上传图片数量，默认6张:uploadImgMaxLength="1"

textHeightString文本框高度，默认300px:textHeight="'400px'

//高度案例

//只读案例

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

===============================================================

顺便总结以前分享过的帖子，方便大家学习

[此贴子已经被作者于2020/12/30 17:11:41编辑过]