Foxtable(狐表)用户栏目专家坐堂 → [免费开源]wangEditor富文本框解决方案,粘贴自动上传图片(截图上传神器啊!),可嵌入视频,vue和jquery的BS框架都能用,不能用在cs哦!


  共有3195人关注过本帖树形打印复制链接

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

帅哥哟,离线,有人找我吗?
chen37280600
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:四尾狐 帖子:824 积分:5269 威望:0 精华:2 注册:2017/12/31 14:53:00
[免费开源]wangEditor富文本框解决方案,粘贴自动上传图片(截图上传神器啊!),可嵌入视频,vue和jquery的BS框架都能用,不能用在cs哦!  发帖心情 Post By:2020/4/27 16:46:00 [只看该作者]

富文本框,是个天坑!真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富文本框非常多坑...非刚需别折腾...
9虽然几乎没几个狐友看懂的,但是有需要的人可以拿去。要看懂之前发的vue框架的人才能用http://www.foxtable.com/bbs/dispbbs.asp?BoardID=2&ID=146015&replyID=&skin=1


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页面里,

  1. //js里
  2. import wEditor from '@/components/wangEditor/wangEditor.vue'
  1. //html
  2. <wEditor v-model="form.Content" />

效果:

此主题相关图片如下:4.png
按此在新窗口浏览图片


服务器接收的文件效果:

此主题相关图片如下:5.png
按此在新窗口浏览图片

5增加可选参数

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


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

//高度案例

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

//只读案例

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



此主题相关图片如下:6.png
按此在新窗口浏览图片

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

联系QQ:2385350359















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

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:75264 积分:381802 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2020/4/27 16:54:00 [只看该作者]

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

 回到顶部
帅哥哟,离线,有人找我吗?
WELOVEFOX
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:365 积分:2598 威望:0 精华:0 注册:2016/12/21 22:58:00
  发帖心情 Post By:2020/4/27 18:08:00 [只看该作者]

多谢分享

 回到顶部
帅哥哟,离线,有人找我吗?
咸鱼
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:婴狐 帖子:47 积分:398 威望:0 精华:0 注册:2019/11/8 11:12:00
  发帖心情 Post By:2020/5/25 11:35:00 [只看该作者]

多谢分享

 回到顶部
帅哥哟,离线,有人找我吗?
foxtable-hg
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:幼狐 帖子:92 积分:1042 威望:0 精华:0 注册:2018/9/9 18:03:00
  发帖心情 Post By:2020/5/25 13:25:00 [只看该作者]

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

 回到顶部
帅哥哟,离线,有人找我吗?
bahamute
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:六尾狐 帖子:1397 积分:11026 威望:0 精华:0 注册:2008/9/1 22:20:00
  发帖心情 Post By:2020/5/29 8:57:00 [只看该作者]

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

 回到顶部
帅哥哟,离线,有人找我吗?
sundog
  7楼 | QQ | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:幼狐 帖子:179 积分:1717 威望:0 精华:0 注册:2008/10/19 11:36:00
  发帖心情 Post By:2020/7/20 20:35:00 [只看该作者]

谢谢分享

 回到顶部
帅哥哟,离线,有人找我吗?
wfkbabro
  8楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:童狐 帖子:252 积分:2279 威望:0 精华:0 注册:2011/10/21 17:07:00
  发帖心情 Post By:2020/10/1 11:28:00 [只看该作者]

谢谢分享!

 回到顶部
帅哥哟,离线,有人找我吗?
肥肥记
  9楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:童狐 帖子:280 积分:2142 威望:0 精华:0 注册:2016/9/15 11:50:00
  发帖心情 Post By:2020/11/17 11:58:00 [只看该作者]

图片点击可在新窗口打开查看

 回到顶部
帅哥哟,离线,有人找我吗?
tombrady
  10楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:婴狐 帖子:1 积分:71 威望:0 精华:0 注册:2021/9/15 15:31:00
  发帖心情 Post By:2021/9/15 15:32:00 [只看该作者]

浮动固定反攻倒算

 回到顶部