如何在Draft.js导入导出HTML时保留自定义类名firstElement？

我在为Draft.js编写自定义代码时遇到问题：导入带类名的HTML时，类名会丢失，导致无法渲染对应样式。我的导入代码如下：

constructor(props) {
super(props);
const ss = ContentState.createFromBlockArray(
  convertFromHTML('<p class="firstElement">Test</p>')
);
this.state = {
  editorState: EditorState.createWithContent(ss)
};
}

请问如何在导出内容时保留第一段的firstElement类名？

解决方案 #

Draft.js的convertFromHTML默认不会保留HTML类名，需要通过自定义转换规则、块渲染器和导出规则来实现类名的完整留存：

1. 导入时保存类名到块数据 #

修改convertFromHTML的调用，通过options参数提取HTML标签的类名，存储到块的data属性中：

constructor(props) {
  super(props);
  const html = '<p class="firstElement">Test</p>';
  // 自定义转换规则，提取p标签的class并存入block的data
  const blocksFromHTML = convertFromHTML(html, {
    blockRenderMap: {
      p: {
        element: 'p',
        getProps: (node) => ({
          data: { className: node.getAttribute('class') }
        })
      }
    }
  });
  const contentState = ContentState.createFromBlockArray(blocksFromHTML);
  this.state = {
    editorState: EditorState.createWithContent(contentState)
  };
}

2. 编辑器渲染时应用类名 #

自定义blockRendererFn，让编辑器渲染块时读取data中的类名并应用：

const blockRendererFn = (block) => {
  if (block.data.className) {
    return {
      component: (props) => <p className={block.data.className}>{props.children}</p>,
      editable: true
    };
  }
  return null;
};

// 在Editor组件中配置
<Editor
  editorState={this.state.editorState}
  onEditorStateChange={(editorState) => this.setState({ editorState })}
  blockRendererFn={blockRendererFn}
/>

3. 导出HTML时还原类名 #

使用draft-convert的convertToHTML方法，自定义块转换规则，从data中读取类名并添加到HTML标签：

import { convertToHTML } from 'draft-convert';

// 导出时的自定义转换
export const exportToHTML = (editorState) => {
  return convertToHTML({
    block: (block) => {
      if (block.type === 'paragraph' && block.data.className) {
        return `<p class="${block.data.className}">${block.text}</p>`;
      }
      // 其他块类型使用默认转换
      return convertToHTML.defaultBlockRender(block);
    }
  })(editorState.getCurrentContent());
};

通过这三步，就能实现导入时保存类名、编辑时渲染样式、导出时还原类名的完整流程。

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