react-draft-wysiwyg带内联样式的默认值无法加载样式如何修复

存在的问题 #

• 依赖导入缺失：代码未引入React以及useState、useEffect钩子，会直接触发运行报错
• HTML语法错误：默认值字符串中style属性写法异常，多余的**嵌入到属性值内部，导致HTML解析失败
• 原生API能力限制：draft-js自带的convertFromHTML方法默认仅支持解析标准语义标签（如<strong>、<h1>），不会自动识别内联style属性携带的样式，需要手动扩展解析逻辑
• 冗余代码：onChange方法中对setEditorState添加async/await属于无效操作，React的状态更新方法本身不是Promise类型
• 冗余属性：stripPastedStyles属性会在粘贴内容时自动清除所有样式，不需要保留样式功能时再开启

修复方案 #

1. 补充缺失的依赖导入，修正错误的默认值HTML语法
2. 自定义HTML样式解析逻辑，将内联style属性转换为draft-js可识别的内联样式规则
3. 配置编辑器的customStyleMap参数，将自定义的样式标识符映射为实际生效的CSS样式

完整修复后代码 #

import React, { useState, useEffect } from 'react';
import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertFromHTML } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

// 自定义样式映射：将draft内部的样式标识和实际CSS规则对应
const customStyleMap = {
  'COLOR-RED': {
    color: 'red'
  }
  // 可根据需求扩展其他颜色、字号、行高等样式规则
};

export default function App() {
  // 修正语法错误的默认值HTML
  const defaultValue = "<p style=\"color:red\">This is a paragraph.</p>";

  const initialState = () => EditorState.createEmpty();
  const [editorState, setEditorState] = useState(initialState);

  useEffect(() => {
    if (defaultValue.trim()) {
      // 扩展convertFromHTML逻辑，解析style属性为draft可识别的样式标识
      const parsedHTML = convertFromHTML(defaultValue, {
        styleToDraftStyle: (style) => {
          if (style.color === 'red') return 'COLOR-RED';
          return null;
        }
      });
      const contentState = ContentState.createFromBlockArray(
        parsedHTML.contentBlocks,
        parsedHTML.entityMap
      );
      setEditorState(EditorState.createWithContent(contentState));
    }
  }, []);

  const onChange = (value) => {
    setEditorState(value);
  };

  return (
    <div className="App">
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onChange}
        customStyleMap={customStyleMap} // 传入自定义样式映射
        ariaLabel="draftEditor"
      />
    </div>
  );
}

扩展说明 #

如果需要支持更多类型的内联样式，只需在customStyleMap中添加对应的映射规则，同时在convertFromHTML的配置中补充对应的style属性判断逻辑即可。如果需要批量处理复杂的带样式富文本导入，可以使用draft-js-import-html这类第三方封装库简化样式解析流程，无需手动编写所有样式的映射逻辑。

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