GrapesJS文本组件多带options自定义Trait仅显示一个的问题求助

为GrapesJS的文本组件类添加多个带options的style_select类型自定义Trait，配置了文本颜色、文本对齐、文本透明度三个Trait，但仅显示“文本颜色”项。测试发现仅给单个Trait设置options时所有Trait都能正常显示，但每个Trait都需要通过options提供多选项，求解决办法。

代码示例：

editor.DomComponents.addType('text', {
        model: {
          defaults: {
            traits: [
              ...type.model.prototype.defaults.traits,
              {
                type: "style_select",
                options: textColor.map((color) => ({
                  name: color,
                  value: color,
                })),
                label: "Text Color",
              },
              {
                type: "style_select",
                options: textAlignment.map((align) => ({
                  name: align,
                  value: align,
                })),
                label: "Text Alignment",
              },
              {
                type: "style_select",
                options: textOpacity.map((opacity) => ({
                  name: opacity,
                  value: opacity,
                })),
                label: "Text Opacity",
              },
            ],
          },
        },
      });

问题出在多个style_select类型Trait未指定对应的CSS属性（property字段），GrapesJS无法区分不同Trait的作用目标，导致只有第一个Trait被渲染出来。

每个style_selectTrait必须明确添加property字段，对应它要控制的CSS属性：

• 文本颜色对应color
• 文本对齐对应text-align
• 文本透明度对应opacity

同时要确保textColor、textAlignment、textOpacity这三个数组有非空的有效数据，避免map后生成空的options数组，导致Trait不显示。

修正后的代码如下：

// 示例选项数组，可根据需求修改
const textColor = ['#000000', '#ffffff', '#ff0000'];
const textAlignment = ['left', 'center', 'right'];
const textOpacity = ['1', '0.7', '0.5', '0.3'];

// 先获取原文本组件类型，确保继承正确
const type = editor.DomComponents.getType('text');

editor.DomComponents.addType('text', {
  model: {
    defaults: {
      traits: [
        ...type.model.prototype.defaults.traits,
        {
          type: "style_select",
          property: "color", // 指定控制文本颜色的CSS属性
          options: textColor.map((color) => ({
            name: color,
            value: color,
          })),
          label: "文本颜色",
        },
        {
          type: "style_select",
          property: "text-align", // 指定控制文本对齐的CSS属性
          options: textAlignment.map((align) => ({
            name: align === 'left' ? '左对齐' : align === 'center' ? '居中' : '右对齐',
            value: align,
          })),
          label: "文本对齐",
        },
        {
          type: "style_select",
          property: "opacity", // 指定控制透明度的CSS属性
          options: textOpacity.map((opacity) => ({
            name: `${parseFloat(opacity)*100}%`,
            value: opacity,
          })),
          label: "文本透明度",
        },
      ],
    },
  },
});

额外检查项：

• 确认type变量正确指向了GrapesJS原有的文本组件类型，否则...type.model.prototype.defaults.traits会报错
• 检查三个选项数组是否有内容，空数组会导致对应的Trait无法显示

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