Ckeditor 中粘贴图片

我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片。 
这里我们实现主要是获取对应的粘贴事件。


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

这里先把对应事件处理,把粘贴进来的图片处理为base64 格式。(这里我们可以直接再这里上传后再进行标签插入,因为上传图片肯定有一点时间,这里为了界面流畅,可以不在这里处理) 
这样我们粘贴就可以出现图片了。但是我们要进行图片上传或者什么图片,同时还有在QQ 聊天窗口里面直接右键复制这样的图片粘贴是无法显示的。这样html 源码直接有个img 标签 标签的src 属性是


  • 1

类似于这样的,但是浏览器都是无法对这类似的路径都无法处理,所有这样我们就只用过滤掉这样的图片。

如果要想复制qq聊天窗口中的图片,可以先将图片双击最大化后右键复制就可以了。

我们想给对应图片进行上传或者其他处理


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

上面对应处理空标签,是处理粘贴qq 聊天窗口中图片复制过来会自动生成对应一串注释,这个可能是qq 产生的信息,为空整洁我们还是remove 掉。 
这里其实我们也不可以不对图片进行base64 转实际文件处理,直接存储base64在html 中,但是这个还是不建议这样操作。 
再操作bae64 我们可以在上面方法里面分别处理。我还可以在将整个文档提交到服务器后进行img 标签解析判断是否为base64 然后在处理为实际图片 
这个方法兼容

转载于:https://www.cnblogs.com/mouseleo/p/8746707.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值