Draft JS如何添加自定义类以实现自适应内联样式？

当然有办法解决这个问题！Draft JS虽然默认用内联样式处理自定义格式，但我们可以通过自定义渲染逻辑，完全用CSS类来控制选中内容的高亮样式，完美适配你的夜间模式需求。下面是具体的实现步骤：

1. 定义自定义高亮样式类型 #

首先，给你的高亮样式定义专属标识（代替默认的内联颜色属性），方便Draft JS识别和映射：

// 自定义高亮样式常量，键是Draft JS识别的样式名，值对应CSS类前缀
const HIGHLIGHT_TYPES = {
  YELLOW_HIGHLIGHT: 'highlight-yellow',
  BLUE_HIGHLIGHT: 'highlight-blue'
};

2. 自定义内联样式渲染组件 #

Draft JS允许我们通过inlineStyleRenderer属性替换默认的内联样式渲染逻辑，在这里我们可以判断当前应用的样式，给元素添加对应的CSS类：

import { Editor, RichUtils } from 'draft-js';
import { useState } from 'react';

// 自定义内联样式渲染组件
const CustomInlineStyle = ({ children, style }) => {
  let className = '';

  // 匹配自定义高亮样式
  if (style.has(HIGHLIGHT_TYPES.YELLOW_HIGHLIGHT)) {
    className = 'text-highlight text-highlight--yellow';
  } else if (style.has(HIGHLIGHT_TYPES.BLUE_HIGHLIGHT)) {
    className = 'text-highlight text-highlight--blue';
  }

  // 处理Draft JS默认基础样式（比如加粗、斜体）
  if (style.has('BOLD')) className += ' font-bold';
  if (style.has('ITALIC')) className += ' font-italic';

  return <span className={className.trim()}>{children}</span>;
};

// 集成到你的编辑器组件
function MyEditor() {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
      inlineStyleRenderer={CustomInlineStyle}
    />
  );
}

3. 实现高亮按钮的切换逻辑 #

给你的高亮按钮添加点击事件，用RichUtils.toggleInlineStyle来给选中内容添加/移除自定义样式：

const handleToggleHighlight = (highlightType) => {
  const newEditorState = RichUtils.toggleInlineStyle(editorState, highlightType);
  setEditorState(newEditorState);
};

// 按钮示例
<button onClick={() => handleToggleHighlight(HIGHLIGHT_TYPES.YELLOW_HIGHLIGHT)}>
  黄色高亮
</button>
<button onClick={() => handleToggleHighlight(HIGHLIGHT_TYPES.BLUE_HIGHLIGHT)}>
  蓝色高亮
</button>

4. 编写适配夜间模式的CSS样式 #

现在你可以完全用CSS类控制样式，根据网站的夜间模式标识（比如body.dark-mode）切换颜色：

/* 亮色模式下的高亮样式 */
.text-highlight--yellow {
  background-color: #fff3cd;
  color: #856404;
  padding: 2px 4px;
  border-radius: 3px;
}

.text-highlight--blue {
  background-color: #cce5ff;
  color: #004085;
  padding: 2px 4px;
  border-radius: 3px;
}

/* 夜间模式下的高亮样式 */
body.dark-mode .text-highlight--yellow {
  background-color: #533f03;
  color: #ffeeba;
}

body.dark-mode .text-highlight--blue {
  background-color: #002752;
  color: #b8daff;
}

进阶：用Entity处理更灵活的高亮（可选） #

如果需要支持用户自定义任意颜色的高亮，Draft JS的Entity系统会更适合。你可以创建HIGHLIGHT类型的Entity存储颜色信息，渲染时根据Entity数据添加对应类：

import { Entity } from 'draft-js';

// 创建自定义高亮Entity
const createCustomHighlight = (color) => {
  const contentState = editorState.getCurrentContent();
  // 创建可修改的HIGHLIGHT类型Entity，存储颜色数据
  const contentWithEntity = contentState.createEntity(
    'HIGHLIGHT',
    'MUTABLE',
    { color }
  );
  const entityKey = contentWithEntity.getLastCreatedEntityKey();
  // 给选中内容应用这个Entity
  const newEditorState = RichUtils.toggleLink(
    editorState,
    editorState.getSelection(),
    entityKey
  );
  setEditorState(newEditorState);
};

// 自定义Entity渲染组件
const HighlightEntity = ({ children, entityKey }) => {
  const { color } = Entity.get(entityKey).getData();
  return (
    <span className={`text-highlight text-highlight--${color}`}>
      {children}
    </span>
  );
};

// 在Editor中配置Entity渲染
<Editor
  ...
  entityRenderer={(props) => {
    if (props.entityType === 'HIGHLIGHT') {
      return <HighlightEntity {...props} />;
    }
    // 其他Entity用默认渲染
    return null;
  }}
/>

这样你就能完全摆脱内联样式的限制，用CSS类实现高度可控的高亮效果，轻松适配夜间模式切换！

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