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编辑过]

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

react 从剪切板里粘贴图片并使用WEditor富文本展示
具体实现思路: 使用原生粘贴方法获取到粘贴版的内容然后调用富文本根据光标插入内容的方法使用到的知识点以及api: 1.调用wangeditor富文本根据光标插入内容的api: this.editor ...
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器:自定义粘贴,去除复制word或网页html冗余样式代码的解决方案 1.环境说明 2.解决方案 3.完整代码总结在使用wangEditor富文本编辑器时,当从wor ...
使用wangEditor富文本编辑器上传图片和文字
"刘郎已恨蓬山远,更隔蓬山一万重" 序现在做的是从web端给眼镜端发送消息,其实就是web端把消息存到数据库,然后眼镜从数据库获取消息即可.现在在web端的输入框需要直接复制图片 ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
wangeditor富文本编辑器集成vod超级播放器
<template lang="html"><div class="editor" > <!-- <SelectFile&g ...
wangeditor富文本编辑器上传图片以及跨域问题解决
一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片本章内容主要讲 ...

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

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

最新文章

热门文章