div在contenteditable可编辑状态下去掉粘贴内容样式

466 阅读1分钟

HTML里除了input,textarea可以输入内容外,div在添加了 contenteditable="true" 后也具有编辑功能,而且还支持样式渲染。

也正是由于div可编辑状态下也支持样式的渲染,当我们复制了一段文本内容要粘贴到div编辑框里的时候,会发现粘贴的内容会带样式,检查元素也会看到div里有多余的带样式的标签。即使看似复制的是纯文本,粘贴进去的内容也会有样式标签套着。 QQ截图20230202095029.jpg

解决此问题,就要从粘贴的地方入手,在div上有个paste粘贴事件,粘贴事件有一个clipboardData的属性,提供了对剪贴板的访问,clipboardData.getData(fomat)可以从剪贴板获取指定格式的数据。在粘贴事件里,先阻止掉默认的粘贴,然后通过insertText插入文本的方法来替换。
document.execCommand("insertText", false, text)

如果要去掉文本里的换行,也在paste事件里处理,先把要粘贴的文本处理好,去掉标签,空格,换行,处理好后再执行文本插入。

<div id="editor" contenteditable="true"></div>

let $editor = document.getElementById('editor');
    
$editor.addEventListener('paste', (e)=>{
    e.preventDefault();
    let text =  e.clipboardData.getData('text/plain');

    document.execCommand("insertText", false, text);
});

来源: blog.fuxiaochun.com/frontend/19…