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

Posted 2020-10-15 NickChen

　　上个月做了个聊天的需求（网页版的）。说到聊天都想到输入框，说到输入框都会想到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’这个属性，我一眼就看到，从字面上理解，就是只保存纯文本，哇！！简直太棒了吧，马上上代码试了试，果不其然，粘贴进来的文字，全部样式都去除！！！

　　以上。