单行代码实现浏览器记事本及粘贴富文本格式过滤问题咨询

解决方法 #

直接使用添加了粘贴拦截逻辑的代码即可，所有粘贴操作会自动过滤富文本，仅保留纯文本：

• 基础版（默认白底黑字）
  data:text/html,<html contenteditable><script>document.addEventListener("paste",e=>{e.preventDefault();document.execCommand("insertText",false,e.clipboardData.getData("text/plain"))})</script>
• 黑底护眼优化版
  data:text/html,<title>纯文本记事本</title><html contenteditable style="background:Black;color:LightGray;font-family:monospace;font-size:16px;line-height:1.5;padding:2rem"><script>document.addEventListener("paste",e=>{e.preventDefault();document.execCommand("insertText",false,e.clipboardData.getData("text/plain"))})</script>

实现逻辑 #

• 给全局页面绑定paste事件监听
• 触发粘贴时调用e.preventDefault()拦截浏览器默认的富文本粘贴行为
• 通过e.clipboardData.getData("text/plain")读取剪贴板内的纯文本内容
• 调用document.execCommand方法将纯文本插入到当前光标位置，所有原富文本样式、字体、颜色等属性会被完全过滤，换行符等文本格式会正常保留。

内容的提问来源于stack exchange，提问作者ProjectPhysX