如何在Angular 15的TinyMCE编辑器颜色选择器中启用RGBA alpha通道？

我在Angular 15 Web应用中部署了TinyMCE编辑器，当前通过color_map属性配置颜色选择器，代码如下：

modules = { 
  branding: false,   
  menubar: 'image insert format table',   
  plugins: 'lists link image table code help wordcount',   
  toolbar: 'drpdwnHeading bold bullist numlist indent outdent table link image backcolor | style_formats',   
  style_formats: [     
    { title: 'Heading 3', format: 'h3' },     
    { title: 'Heading 4', format: 'h4' },     
    { title: 'Heading 5', format: 'h5' },   
  ],   
  color_map: [     
    '#F27E00', // Red     
    '#EB0000', // Green     
    '#0000FF'  // Blue     
    // Add more color codes as needed   
  ]
};

但我需要让颜色选择器支持带alpha通道的RGBA颜色值，当添加如#EB000026这类带alpha通道的颜色值时，编辑器无法正常工作。我尝试过带#号、不带#号的写法，也试过textcolor_map属性，均未解决问题，请问该如何处理？

解决方法 #

1. 改用RGBA函数格式定义颜色 #

TinyMCE对8位十六进制（#RRGGBBAA）格式的兼容性较差，直接使用RGBA函数格式配置带透明度的颜色即可正常识别，示例：

color_map: [
  'rgba(242, 126, 0, 1)', // 不透明红色
  'rgba(235, 0, 0, 0.15)', // 15%透明度绿色
  'rgba(0, 0, 255, 0.5)', // 50%透明度蓝色
  // 按需添加更多RGBA颜色
]

2. 升级TinyMCE至稳定版 #

若你使用的TinyMCE版本低于6.x，部分旧版本存在8位十六进制颜色解析Bug，升级到最新稳定版后可直接支持#RRGGBBAA格式的颜色值。

3. 自定义颜色选择器（可选） #

如果需要更灵活的颜色选择功能，可通过color_picker_callback配置自定义颜色选择逻辑，支持任意颜色格式：

modules = {
  // 其他原有配置...
  color_picker_callback: function(callback, currentValue) {
    // 此处可接入第三方颜色选择组件，或直接返回指定RGBA颜色
    callback('rgba(235, 0, 0, 0.15)');
  }
};

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