如何将带文本对齐的Draft.js内容转换为对应样式的HTML字符串？

问题 #

在React项目中使用集成了对齐插件的Draft.js编辑器，支持设置文本对齐格式。需要将编辑器输出的JSON内容转换为HTML字符串用于导出PDF，但使用draft-js-export-html的stateToHTML方法转换时，文本对齐（如center）等行内样式未被正确转换，仅生成下划线等基础样式。

相关代码 #

import { stateToHTML } from "draft-js-export-html";
import createMentionPlugin, {
  defaultSuggestionsFilter,
} from '@draft-js-plugins/mention';
import createSideToolbarPlugin from '@draft-js-plugins/side-toolbar';
import createToolbarPlugin from '@draft-js-plugins/static-toolbar';
import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton,
  HeadlineOneButton,
  HeadlineTwoButton,
  UnorderedListButton,
  OrderedListButton,
  AlignBlockDefaultButton,
  AlignBlockLeftButton,
  AlignBlockCenterButton,
  AlignBlockRightButton
} from '@draft-js-plugins/buttons';

// ... 省略其他代码

const [editorState1, setEditorState1] = useState(
    () => EditorState.createEmpty()) // 初始状态

const sideToolbarPlugin1 = createSideToolbarPlugin();
const toolbarPlugin1 = createToolbarPlugin();
const focusPlugin = createFocusPlugin();
const alignmentPlugin = createAlignmentPlugin();
const textAlignmentPlugin = createTextAlignmentPlugin();

const mentionPlugin1 = createMentionPlugin({})

// ... 省略其他代码

const [plugins1] = useMemo(() => {
    return [[toolbarPlugin1, sideToolbarPlugin1, mentionPlugin1, alignmentPlugin, textAlignmentPlugin]]
  },
    []);

const convertHtml = () => {
  const htmlString = stateToHTML(editorState1.getCurrentContent())
  console.log(htmlString)
}

return (
  <Editor
    editorState={editorState1}
    onChange={handleEditState}
    plugins={plugins1}
    placeholder="Create Document"
    ref={editorRef}
    autoFocus
    handleKeyCommand={handleKeyCommand}
    keyBindingFn={myKeyBindingFn}
    blockStyleFn={blockStyleFn}
  />
)

编辑器输出的JSON #

{
  "blocks": [
    {
      "key": "b09h7",
      "data": {},
      "text": "dDocument titlefdsf sfsdf sd fffsd sdfdfs dfs dfs g dfssdf fsdfsdfdsf dfsdf sdfsdf dfkdjffdsd ds dsddfdfsdfvsdfsdfsd",
      "type": "unordered-list-item",
      "depth": 0,
      "entityRanges": [],
      "inlineStyleRanges": [
          {
              "style": "UNDERLINE",
              "length": 116,
              "offset": 0
          },
          {
              "style": "center",
              "length": 116,
              "offset": 0
          }
      ]
    }
  ]
}

转换后的HTML（缺失对齐样式） #

<li><u>dDocument titlefdsf sfsdf sd fffsd sdfsdf dfs dfs g dfssdf fsdfsdfdsf dfsdf sdfsdf dfkdjffdsd ds dsddfdfsdfvsdfsdfsd</u></li>

解决方案 #

draft-js-export-html的stateToHTML方法默认只处理Draft.js内置的行内样式（如BOLD、ITALIC、UNDERLINE等），自定义的对齐样式需要通过自定义样式转换函数来处理。

步骤1：定义自定义样式转换规则 #

创建函数，将Draft中的对齐样式映射为对应的HTML行内样式：

const customStyleFn = (style) => {
  switch (style) {
    case 'center':
      return {
        element: 'span',
        attributes: {
          style: 'text-align: center; display: block;'
        }
      };
    case 'left':
      return {
        element: 'span',
        attributes: {
          style: 'text-align: left; display: block;'
        }
      };
    case 'right':
      return {
        element: 'span',
        attributes: {
          style: 'text-align: right; display: block;'
        }
      };
    // 保留默认样式的处理逻辑
    default:
      return null;
  }
};

步骤2：在stateToHTML中应用自定义转换函数 #

修改convertHtml函数，将自定义样式函数传入配置项：

const convertHtml = () => {
  const htmlString = stateToHTML(editorState1.getCurrentContent(), {
    customStyleFn: customStyleFn
  });
  console.log(htmlString);
};

说明 #

• 由于文本对齐是块级样式，需要添加display: block确保text-align属性生效；
• 如果你的对齐插件使用的样式名不是center/left/right，需对应调整switch语句中的case值，匹配JSON输出里的style字段；
• 转换后的HTML会包含对齐样式，示例输出：

<li><span style="text-align: center; display: block;"><u>dDocument titlefdsf sfsdf sd fffsd sdfsdf dfs dfs g dfssdf fsdfsdfdsf dfsdf sdfsdf dfkdjffdsd ds dsddfdfsdfvsdfsdfsd</u></span></li>

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