在Draftail编辑器中实现类Word字体颜色的有限方块选色方案咨询

嘿，这个需求我刚好折腾过！要在Draftail里做出像Word那样的方块式有限颜色选择，核心是利用Draftail的**自定义插件（Plugin）和内联样式（Inline Style）**来实现，下面是我验证过的最优方案，分步骤来：

1. 先确定你的颜色集合 #

首先把你要提供的有限颜色列出来，比如常用的基础色，给每个颜色分配唯一的样式标识和对应的颜色值：

// 自定义你的颜色列表，可按需增减
const COLOR_STYLES = [
  { label: '黑色', style: 'color-black', color: '#000000' },
  { label: '红色', style: 'color-red', color: '#FF0000' },
  { label: '蓝色', style: 'color-blue', color: '#0000FF' },
  { label: '绿色', style: 'color-green', color: '#008000' },
  { label: '橙色', style: 'color-orange', color: '#FFA500' },
  // 继续添加你需要的颜色...
];

这里的style是Draftail用来识别内联样式的唯一标识，color则是用来渲染方块图标的颜色值。

2. 打造自定义颜色选择工具栏按钮 #

Draftail允许我们完全自定义工具栏组件，我们要把默认的颜色选择器替换成一排颜色方块。用ToolbarButton组件来封装每个颜色选项：

import { ToolbarButton } from 'draftail';

const ColorPickerButtonGroup = ({ getEditorState, setEditorState, isActive, toggleInlineStyle }) => {
  return (
    <div className="draftail-color-picker-group">
      {COLOR_STYLES.map(({ label, style, color }) => (
        <ToolbarButton
          key={style}
          label={label}
          // 用颜色方块作为按钮图标
          icon={() => (
            <span 
              style={{ 
                backgroundColor: color, 
                width: '16px', 
                height: '16px', 
                display: 'inline-block', 
                borderRadius: '2px'
              }} 
            />
          )}
          // 判断当前是否激活了该颜色样式
          isActive={isActive(style)}
          onMouseDown={(e) => {
            e.preventDefault();
            // 切换当前颜色样式
            toggleInlineStyle(style);
          }}
        />
      ))}
      {/* 额外添加清除颜色按钮 */}
      <ToolbarButton
        key="color-clear"
        label="清除颜色"
        icon={() => (
          <span 
            style={{ 
              width: '16px', 
              height: '16px', 
              display: 'inline-block', 
              borderRadius: '2px',
              border: '1px solid #ccc',
              backgroundColor: 'transparent'
            }} 
          />
        )}
        onMouseDown={(e) => {
          e.preventDefault();
          // 移除所有自定义颜色样式
          const currentState = getEditorState();
          let newState = currentState;
          COLOR_STYLES.forEach(({ style }) => {
            newState = toggleInlineStyle(newState, style);
          });
          setEditorState(newState);
        }}
      />
    </div>
  );
};

这里每个按钮的图标就是对应颜色的小方块，点击时触发样式切换，还额外加了一个“清除颜色”的按钮，和Word的逻辑对齐。

3. 把自定义样式和按钮注册到编辑器 #

接下来要把这些颜色样式和自定义工具栏按钮配置到Draftail编辑器里：

import { DraftailEditor } from 'draftail';

// 编辑器配置
const editorConfig = {
  // 保留默认的内联样式（比如粗体、斜体），再加入我们的颜色样式
  inlineStyles: [
    { type: 'BOLD', label: '粗体', icon: 'bold' },
    { type: 'ITALIC', label: '斜体', icon: 'italic' },
    // 把颜色样式映射成Draftail能识别的格式
    ...COLOR_STYLES.map(({ style, label, color }) => ({
      type: style,
      label,
      // 这里是编辑器内容渲染时用的CSS样式
      style: { color },
    })),
  ],
  // 注册自定义工具栏插件
  plugins: [
    {
      type: 'color-picker',
      component: ColorPickerButtonGroup,
      position: 'inline', // 把颜色选择器放在内联样式工具栏区域
    },
  ],
};

// 渲染编辑器组件
<DraftailEditor
  editorState={editorState}
  onChange={setEditorState}
  config={editorConfig}
/>

4. 优化样式让它更像Word #

最后加一点CSS来调整工具栏的布局，让颜色方块排列更整齐，交互更自然：

.draftail-color-picker-group {
  display: flex;
  gap: 3px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

.draftail-color-picker-group .Draftail-ToolbarButton {
  padding: 0;
  border: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draftail-color-picker-group .Draftail-ToolbarButton:hover {
  border: 1px solid #999;
  border-radius: 2px;
}

.draftail-color-picker-group .Draftail-ToolbarButton.is-active {
  border: 1px solid #0078d4;
  box-shadow: inset 0 0 0 1px #0078d4;
}

这样颜色方块会整齐排列，hover和激活状态有明显提示，和Word的交互体验几乎一致。

方案优势总结 #

• 完全基于Draftail原生扩展机制，兼容性拉满，不会破坏编辑器核心功能
• 颜色数量和样式完全可控，你想加多少颜色都可以
• 交互逻辑和Word对齐，用户不用重新学习，上手成本低

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