React+TypeScript中contentEditable设为plaintext-only报错，如何实现纯文本编辑？

这个问题我之前也碰到过，TypeScript的DOM类型定义确实没跟上浏览器对contentEditable的扩展支持——标准里它现在允许字符串值（比如"plaintext-only"），但TypeScript默认把它的类型限制成了boolean | undefined，所以直接写会报错。下面给你几种靠谱的解决办法：

1. 类型断言（快捷临时方案） #

直接通过类型断言告诉TypeScript这个值是合法的，两种写法可选：

简化版（快速解决） #

<div
  contentEditable={"plaintext-only" as any}
  className="plaintext-editor"
></div>

严谨版（更符合类型规范） #

<div
  contentEditable={"plaintext-only" as "plaintext-only" | boolean | undefined}
  className="plaintext-editor"
></div>

这种方法简单直接，适合单个组件的快速适配。

2. 扩展全局DOM类型定义（长期优雅方案） #

如果你的项目多个组件都需要用到纯文本编辑，推荐在项目中扩展全局类型，一劳永逸：

在项目的src/types目录下新建dom.d.ts文件（如果没有types目录就新建一个），写入以下内容：

declare global {
  interface HTMLElement {
    contentEditable?: "inherit" | "true" | "false" | "plaintext-only";
  }
}

export {};

保存后，TypeScript会自动识别contentEditable的合法字符串值，后续所有组件都可以直接写contentEditable="plaintext-only"而不会报错。

3. 纯代码逻辑控制（兼容替代方案） #

如果不想修改类型定义，也可以通过监听输入事件手动过滤富文本格式，强制保留纯文本：

import { useState } from "react";

const PlainTextEditor = () => {
  const [text, setText] = useState("");

  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
    const currentElement = e.currentTarget;
    // 提取纯文本内容
    const plainText = currentElement.innerText;
    setText(plainText);
    // 强制覆盖为纯文本，避免粘贴或输入富文本格式
    currentElement.innerText = plainText;
  };

  return (
    <div
      contentEditable={true}
      onInput={handleInput}
      style={{ border: "1px solid #ccc", padding: "8px", minHeight: "100px" }}
    />
  );
};

export default PlainTextEditor;

这种方式不依赖浏览器的"plaintext-only"特性，兼容性更好，适合需要支持老旧浏览器的场景。

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