ExtJS 7.00 HtmlEditor开启enableColors:true后显示异常求助

问题描述 #

使用ExtJS的HtmlEditor组件时，enableColors设为false可正常运行，但改为true后界面出现大量彩色方块异常，希望实现类似Sencha官方示例的正常颜色选择器效果。

错误截图：颜色选择器异常显示

当前代码：

Ext.tip.QuickTipManager.init(), 
new Ext.panel.Panel({
    title: 'Encabezado',
    width: 550,
    height: 200,
    frame: true,
    layout: 'fit',
    items: {
        xtype: 'htmleditor',
        enableColors: false,
        enableAlignments: true,
    },
    renderTo: Ext.getBody(),
})

可能成因 #

• CSS样式冲突：项目自定义CSS或第三方样式覆盖了HtmlEditor颜色选择器的默认样式，比如全局box-sizing、padding、margin等属性干扰了颜色块的布局排列。
• ExtJS版本兼容问题：当前使用的ExtJS版本存在HtmlEditor颜色选择器的渲染bug，或与官方示例使用的版本不一致，旧版本可能存在这类渲染缺陷。
• 资源加载不完整：ExtJS主题CSS文件未完整加载，颜色选择器依赖的样式资源缺失，导致无法正确渲染组件。

其他HtmlEditor使用方式 #

• 自定义颜色选择器：通过扩展插件替换默认颜色选择器，用ExtJS原生ColorPicker实现更稳定的颜色选择功能：

  Ext.define('CustomHtmlEditor', {
      extend: 'Ext.form.field.HtmlEditor',
      plugins: [{
          ptype: 'customcolorpicker',
          init: function(editor) {
              editor.getToolbar().add({
                  text: '选择文字颜色',
                  handler: function() {
                      Ext.create('Ext.picker.Color', {
                          listeners: {
                              select: function(picker, color) {
                                  const selectedText = editor.getSelectedText() || '';
                                  editor.insertHtml(`<span style="color:${color};">${selectedText}</span>`);
                                  picker.destroy();
                              }
                          }
                      }).show();
                  }
              });
          }
      }]
  });
  
  // 使用自定义组件
  items: {
      xtype: 'customhtmleditor',
      enableColors: false, // 关闭默认颜色选择器
      enableAlignments: true
  }
  

• 集成第三方富文本编辑器：若HtmlEditor无法满足需求，可封装CKEditor、TinyMCE等第三方编辑器作为ExtJS组件使用，这类编辑器的颜色选择功能更成熟稳定。

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