如何将Kendo React Editor文本颜色设置为HEX格式而非RGBA

可以通过自定义编辑器颜色工具和提交前HTML内容转换两种方式实现将RGBA格式颜色转为HEX格式：

1. 自定义颜色选择器，直接插入HEX颜色 #

Kendo React Editor的颜色工具支持自定义调色板和颜色选择逻辑，配置后用户选择颜色时直接插入HEX格式的样式：

import { Editor, EditorTools } from '@progress/kendo-react-editor';
const { Color } = EditorTools;

// 自定义HEX调色板，可根据需求添加更多颜色
const hexPalette = [
  '#4371c4', '#ff0000', '#00ff00', '#0000ff',
  '#ffff00', '#ff00ff', '#00ffff', '#808080'
];

const App = () => {
  const handleForeColorChange = (e) => {
    // 强制使用选中的HEX颜色值
    e.sender.exec('foreColor', { value: e.value });
  };

  return (
    <Editor
      ref={editorRef}
      tools={[
        {
          name: 'foreColor',
          component: Color,
          props: {
            palette: hexPalette,
            onChange: handleForeColorChange
          }
        },
        // 其他编辑器工具...
      ]}
    />
  );
};

2. 提交前转换已有RGBA颜色为HEX #

如果编辑器输出中仍存在RGBA格式的颜色，可以在提交到后端前，通过工具函数遍历HTML内容进行转换：

// RGBA转HEX工具函数（仅处理alpha为1的情况，带透明度可根据需求调整）
function rgbaToHex(rgbaStr) {
  const rgbaMatch = rgbaStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*1\)/);
  if (!rgbaMatch) return rgbaStr;

  const [, r, g, b] = rgbaMatch.map(num => parseInt(num, 10));
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}

// 处理编辑器HTML内容
function processEditorHtml(html) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = html;

  // 遍历所有带RGBA颜色的元素
  tempContainer.querySelectorAll('[style*="color: rgba"]').forEach(el => {
    el.style.color = rgbaToHex(el.style.color);
  });

  return tempContainer.innerHTML;
}

// 提交逻辑示例
const handleSubmit = () => {
  const rawHtml = editorRef.current.value;
  const processedHtml = processEditorHtml(rawHtml);
  // 将processedHtml提交至后端
};

注意事项 #

• 如果颜色包含透明度（alpha≠1），标准HEX格式无法表示，此时可选择保留RGBA，或转换为带透明度的HEX格式（如#RRGGBBAA），需确认后端是否支持该格式。
• 优先使用第一种方案，从源头避免生成RGBA格式，减少后续转换的复杂度。

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