Draft-JS列表项目符号样式修改问题：动态块样式设置求助

DevOps 小满

2026-5-19

嘿，我刚好之前处理过类似的Draft-JS列表样式问题，给你分享下解决方案！

首先得明确核心问题：列表的项目符号属于块级元素样式，而你通过customStyleMap设置的是行内文本样式，所以只修改文本字号时，项目符号自然不会同步变化。要解决这个问题，我们需要把字号信息同步到列表块的属性中，再针对性处理块样式。

解决你的两个核心问题

1. 如何动态生成块样式（不用预定义所有类）

Draft-JS的blockStyleFn确实是返回类名，但我们可以基于块的自定义数据动态生成类名，甚至直接用blockRendererFn渲染自定义组件来设置行内样式，完全不需要预定义所有可能的类。

两种方案任你选：

方案A：动态类名 + CSS变量：适合需要全局样式控制的场景
方案B：自定义块渲染组件：更灵活，直接动态设置行内样式，跳过CSS类限制

2. 如何从块中获取样式信息

Draft-JS的ContentBlock对象提供了getBlockData()方法，我们可以在修改字号时，把字号值存入对应列表块的blockData里，之后就能从这个方法中读取到样式信息了。

具体代码实现

第一步：修改字号时同步更新块数据

当用户选择字号时，不仅要给选中文本添加行内样式，还要找到选中的列表块，把字号值存入blockData：

const changeFontSize = (editorState, fontSize) => {
  // 先给选中文本应用行内字号样式
  let newEditorState = RichUtils.toggleInlineStyle(editorState, `font-size-${fontSize}`);
  const contentState = newEditorState.getCurrentContent();
  const selection = newEditorState.getSelection();
  let updatedBlockMap = contentState.getBlockMap();

  // 遍历所有被选中的块，只处理列表项块
  updatedBlockMap.forEach((block) => {
    if (selection.hasEdgeWithinBlock(block.getKey())) {
      const blockType = block.getType();
      if (blockType === 'unordered-list-item' || blockType === 'ordered-list-item') {
        // 将字号存入blockData
        const updatedBlockData = block.getBlockData().set('fontSize', fontSize);
        updatedBlockMap = updatedBlockMap.set(
          block.getKey(),
          block.merge({ blockData: updatedBlockData })
        );
      }
    }
  });

  // 更新内容状态并返回新的编辑器状态
  const newContentState = contentState.merge({ blockMap: updatedBlockMap });
  return EditorState.push(newEditorState, newContentState, 'change-block-data');
};

第二步：实现动态块样式（二选一）

方案A：使用blockStyleFn + 动态CSS类

const getBlockStyle = (block) => {
  const fontSize = block.getBlockData().get('fontSize');
  // 根据字号动态生成类名
  return fontSize ? `list-font-size-${fontSize}` : '';
};

对应的CSS样式（用CSS变量统一控制项目符号和文本字号）：

/* 定义不同字号的CSS变量 */
.list-font-size-14 { --list-font-size: 14px; }
.list-font-size-16 { --list-font-size: 16px; }
.list-font-size-18 { --list-font-size: 18px; }
.list-font-size-20 { --list-font-size: 20px; }

/* 控制列表项目符号的字号 */
ul .list-font-size-14 li::marker,
ol .list-font-size-14 li::marker {
  font-size: var(--list-font-size);
}

/* 同步块内文本字号（如果行内样式没覆盖的话） */
.list-font-size-14 {
  font-size: var(--list-font-size);
}

方案B：使用blockRendererFn渲染自定义组件

const blockRendererFn = (contentBlock) => {
  const blockType = contentBlock.getType();
  // 只处理列表项块
  if (blockType === 'unordered-list-item' || blockType === 'ordered-list-item') {
    const fontSize = contentBlock.getBlockData().get('fontSize');
    // 动态设置行内样式
    const blockStyle = fontSize ? { fontSize: `${fontSize}px` } : {};

    return {
      component: (props) => {
        // 自定义列表项组件，应用样式
        return <li style={blockStyle}>{props.children}</li>;
      },
      editable: true,
    };
  }
  // 其他块用默认渲染
  return null;
};

最后在Editor组件中配置

把上面的getBlockStyle或blockRendererFn传入Editor组件：

<Editor
  editorState={editorState}
  onChange={setEditorState}
  customStyleMap={customStyleMap}
  // 用方案A的话加这个
  blockStyleFn={getBlockStyle}
  // 用方案B的话加这个
  blockRendererFn={blockRendererFn}
/>

这样修改列表文本字号时，项目符号就会和文本同步变化了，而且完全支持动态字号，不需要预定义所有可能的类~

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