如何在Draft.js EditorState中导入HTML/CSS的class（className）属性？

Draft.js 默认的 HTML 解析逻辑只会识别内置的样式（比如 <b> 转 BOLD 样式）和实体，完全忽略自定义的 class 属性——这就是你看到粘贴后样式丢失、EditorState里没有任何样式记录的原因。要实现不依赖标签类型的class解析，我们可以通过自定义HTML导入逻辑+自定义编辑器渲染规则来搞定，方案很简洁，下面一步步来：

第一步：安装依赖扩展HTML解析能力 #

Draft.js 原生的HTML导入工具不够灵活，我们用 draft-js-import-html 这个库来扩展，它支持自定义解析规则：

npm install draft-js-import-html
# 或者用yarn
yarn add draft-js-import-html

第二步：自定义粘贴处理逻辑，解析class到EditorState #

我们重写 handlePastedText 函数，把粘贴的HTML里的class提取出来，转化为Draft.js能识别的inline样式（或者block数据，针对块级元素）：

import { htmlToDraft } from 'draft-js-import-html';
import { EditorState, ContentState } from 'draft-js';

// 自定义解析行内元素的逻辑：提取class并转为inlineStyle
const customParseInline = (element, { entityKey, text }) => {
  const styles = [];
  // 获取元素的所有class
  const classList = element.getAttribute('class')?.split(' ') || [];
  // 把每个class都作为一个inlineStyle添加
  classList.forEach(className => className && styles.push(className));
  
  // 保留Draft.js默认的内置样式解析（比如<b>转BOLD）
  if (['B', 'STRONG'].includes(element.tagName)) styles.push('BOLD');
  if (['I', 'EM'].includes(element.tagName)) styles.push('ITALIC');

  return { styles, entityKey, text };
};

// 自定义解析块级元素的逻辑：提取class到block的data中
const customParseBlock = (element) => {
  const data = {};
  const classList = element.getAttribute('class')?.split(' ') || [];
  if (classList.length) data.className = classList.join(' ');
  // 这里可以根据标签设置blockType，比如<P>设为'paragraph'，默认用'unstyled'
  return { type: 'unstyled', data };
};

// 处理粘贴事件
handlePastedText = (text, html) => {
  if (!html) return false; // 无HTML内容时交给默认处理

  try {
    // 用自定义规则解析HTML为Draft内容块
    const { contentBlocks, entityMap } = htmlToDraft(html, {
      parseInline: customParseInline,
      parseBlock: customParseBlock,
    });
    if (contentBlocks) {
      // 生成新的ContentState和EditorState
      const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
      const newEditorState = EditorState.push(
        this.state.editorState,
        contentState,
        'insert-fragment'
      );
      this.setState({ editorState: newEditorState });
      return true; // 告诉Draft.js我们已经处理了粘贴
    }
  } catch (err) {
    console.error('解析粘贴HTML失败:', err);
  }
  return false; // 解析失败时交给默认逻辑
};

第三步：自定义渲染规则，让class生效 #

现在EditorState里已经保存了class信息，接下来要让编辑器渲染时把这些样式转化为对应的CSS类：

处理行内元素的class #

用 customStyleMap 把我们的inlineStyle映射到CSS类：

// 定义样式映射：key是我们的class名，value是对应的样式配置
const customStyleMap = {
  blau: { className: 'blau' },
  // 可以添加更多自定义class映射
  red-text: { className: 'red-text' },
  // 保留默认的内置样式
  BOLD: { fontWeight: 'bold' },
  ITALIC: { fontStyle: 'italic' },
};

// 在Editor组件中传入customStyleMap
<Editor
  readOnly={this.state.readOnly}
  editorState={this.state.editorState}
  onChange={this.onChange}
  handlePastedText={this.handlePastedText}
  customStyleMap={customStyleMap}
/>

处理块级元素的class #

自定义 blockRendererFn 来渲染带class的块：

const blockRenderer = (block) => {
  const className = block.getData().get('className');
  if (className) {
    return {
      component: (props) => <div className={className} {...props} />,
      editable: true, // 保持块可编辑
    };
  }
  return null; // 无class时用默认渲染
};

// 把blockRendererFn传给Editor
<Editor
  // ...其他属性
  blockRendererFn={blockRenderer}
/>

第四步：添加对应的CSS样式 #

最后别忘了在你的CSS文件中定义这些class的实际样式：

.blau {
  color: blue;
  font-weight: 500;
}

.red-text {
  color: #ff4444;
}

为什么这个方案可行？ #

• 完全不依赖HTML标签类型：不管是<span>、<div>还是<strong>，只要带class就会被解析
• 同时支持行内和块级元素的class处理
• 基于成熟的库扩展，不需要从零写HTML解析逻辑，代码简洁易维护

现在你再粘贴类似 one <span class="blau">simple</span> test 的内容，EditorState里的inlineStyleRanges就会包含"blau"，渲染出来的元素也会带上blau类，样式就能正常生效了。

内容的提问来源于stack exchange，提问作者Matze Bär