contentEditable - 避免粘贴DOM和样式，仅保留纯文本

在Web开发中，contentEditable 属性允许我们将一个元素设为可编辑，从而实现类似于富文本编辑器的功能。然而，在使用 contentEditable 进行复制粘贴操作时，经常会遇到保留不必要的DOM结构和样式的问题。本文将介绍如何通过JavaScript处理粘贴的内容，以仅保留纯文本，而不包含额外的DOM元素和样式。

简介

在默认情况下，使用 contentEditable 元素进行粘贴操作时，会将粘贴板中的内容直接插入到编辑区域，包括HTML标签、样式等。这可能会导致意外的显示问题和不一致的格式。为了解决这个问题，我们可以通过在粘贴事件中处理粘贴的内容，将其格式化为纯文本再插入编辑区域。

格式化粘贴内容

以下是一个示例代码，演示了如何使用JavaScript来格式化粘贴的内容，仅保留纯文本：

// 将复制粘贴的html dom 转换为 string文本
const formatHtmlString = (str) => str?.replace(/[\u00A0-\u9999<>]/gim, (i) => ''.concat('&#', i.charCodeAt(0), ';'));

const onPaste = (e) => {
    e.preventDefault();
    document.execCommand(
        'insertHTML',
        false,
        formatHtmlString(e?.clipboardData.getData('text')),
    );
}

在上述代码中，我们定义了一个 formatHtmlString 函数，它接受一个字符串作为参数，并使用正则表达式将其中的HTML标签转换为对应的HTML实体编码。这样做可以确保插入的内容只包含纯文本。

接着，我们在 onPaste 函数中阻止默认的粘贴操作，然后使用 document.execCommand 方法将经过格式化的纯文本插入到编辑区域中。

应用到 contentEditable

最后，我们将上述代码应用到具有 contentEditable 属性的 <div> 元素上，以实现只保留纯文本的粘贴操作：

<div contentEditable="true" onPaste={onPaste}/>

通过将 onPaste 事件绑定到 contentEditable 元素上，我们可以在粘贴操作发生时进行内容格式化，从而确保只插入纯文本内容。

结论

通过以上方法，我们可以有效地处理 contentEditable 元素的粘贴操作，避免不必要的DOM结构和样式，只保留纯文本内容。这在构建富文本编辑器或其他需要编辑功能的Web应用中非常有用。

请注意，由于浏览器的兼容性差异，可能需要对上述代码进行适当的调整和测试，以确保在不同浏览器中都能正常工作。

希望本文能够帮助您更好地处理 contentEditable 元素的粘贴操作，提升用户体验和内容质量。