CKEditor插件 - 如何使用editor.applyStyle在跨度内设置跨度

Question

目前，我有一个带有下拉框选择的自定义插件对话框，允许我在所选文本之间插入 Apple 或 Samsung 标记。

以下是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());
}

以下代码并不符合我的期望。让我们说，我有以下文字

玛丽有一只小羊羔

第1步

＆＃34;小＆＃34;突出显示。 ＆＃34;苹果＆＃34;被选中了。确定按了

玛丽有little羊羔

我会得到以下控制台输出。

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

第2步

＆＃34;一只小羊羔＆＃34;突出显示。 ＆＃34;三星＆＃34;被选中了。确定按了

玛丽有a little lamb

我会得到以下控制台输出。

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

但是，我期待以下输出。跨度内的跨度。

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

通过修改onOk中的原始代码，我有什么办法可以实现这一目标吗？

Answer 1

CKEditor的样式系统不允许两次应用一种样式，因为它的第一项工作是处理样式内容。在这种情况下，我们讨论的是内联样式，并且应用例如<strong>代码两次。

但是，样式系统处理具有data-*属性的样式的方式不同，因为这些属性用于向内容添加信息，而不是用于样式目的。因此，不要使用brand属性（在HTML中使用BTW。）使用data-brand：

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

您可以多次为同一选择应用一种风格。