Javascript CKEditor插件-如何使用editor.applyStyle在一个范围内创建一个范围

目前，我有一个带有下拉框选择的自定义插件对话框，允许我在所选文本之间插入苹果或三星标签

下面是它的

onClick

函数的外观

onOk: function() {
    var dialog = this;

    // Drop down box selection. Can be either "Apple" or "Samsung"
    var brand = dialog.getValueOf('tab-brand', 'brand');

    var style = new CKEDITOR.style( { element: 'span', attributes: { 'brand': brand } } );
    editor.applyStyle( style );

    console.log(editor.getData());
}

下面的代码在我的预期范围内不起作用。比方说，我有下面的文本

玛丽有一只小羊羔

第一步 “小”被突出显示。“苹果”被选中。好的

玛丽有一只

小羊羔

我将获得以下控制台输出

Mary has a <span brand="Apple">little</span> lamb

Mary has <span brand="Samsung">a little lamb</span>

但是，我希望得到以下输出。一个跨度中的一个跨度

Mary has <span brand="Samsung">a <span brand="Apple">little</span> lamb</span> 

玛丽有一只小羊羔

---

有没有什么方法可以实现这一点，通过在

onOk

中修改我的原始代码？

CKEditor的样式系统不允许两次应用一种样式，因为它的第一项工作是处理样式内容。在本例中，我们讨论的是内联样式，而将

标记应用两次是没有意义的

但是，样式系统处理带有

data-*

属性的样式时会有所不同，因为这些属性用于向内容添加信息，而不是用于样式设置。因此，不要使用

品牌

属性（顺便说一句，这在HTML中是不正确的），而是使用

数据品牌

：

var style = new CKEDITOR.style(
    { element: 'span', attributes: { 'data-brand': 'Apple' } }
);

---

您将能够为同一选择多次应用一种样式。

有趣。我不知道加上“数据”前缀有什么区别。谢谢