javascript - 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

“小”被突出显示。选择了“苹果”。确定已按下

玛丽有一只小小羊

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

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

步骤 2

“一只小羊羔”被突出显示。选择“三星”。确定已按下

玛丽有一只小羊

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

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 中不正确)使用 data-brand :

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

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