div可编辑框,去除粘贴文字样式😄

  上个月做了个聊天的需求(网页版的)。说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签)。查阅了一些资料就看到div标签有一个属性contenteditable,这个属性设置为true的话,div会变成可编辑状态,非常神奇,而且是可以插入图片的。

  之所以写这篇文章当然不是只为了说这个简单的事情啦。因为开发的时候会遇到一个事情,就是复制别的地方的带样式的文字的时候,粘贴到div里,特么会把样式带上,可把我烦死了。各种查阅资料怎么去除样式,但是恕我直言,大部分人的文章都解决不了我的问题。我也有想过要么自己去获取粘贴的内容进行过滤,但是。。。。不现实啊,层级嵌套的深一些的dom就很难很难很难。

  柳暗花明又一村,看了w3c的草案,才知道contenteditable这个属性可不止 true or false。

contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

  大概有这些,其他的我不知道,但是 ‘plaintext-only’这个属性,我一眼就看到,从字面上理解,就是只保存纯文本,哇!!简直太棒了吧,马上上代码试了试,果不其然,粘贴进来的文字,全部样式都去除!!!

  以上。

posted @ 2017-11-22 11:47  陈尼克  阅读(1991)  评论(3编辑  收藏  举报