CKEditor插件 - elementPath的正确行为

Question

目前，我有以下HTML内容

<span criteria="{&quot;animal&quot;:[&quot;DOG&quot;]}">abc</span> def <span criteria="{&quot;animal&quot;:[&quot;CAT&quot;]}">ghi</span>

我的目的是

1. 我希望知道我选择的文字包含criteria属性？
2. 如果它包含criteria属性，它的价值是什么？

我运行以下代码。

editor.on('selectionChange', function( ev ) {
    var elementPath = editor.elementPath();
    var criteriaElement = elementPath.contains( function( el ) {
        return el.hasAttribute('criteria');
    });

    var array = elementPath.elements;
    var arrayLength = array.length;
    for (var i = 0; i < arrayLength; i++) {
        console.log(i + " --> " + array[i].$.innerHTML);
    }

    if (criteriaElement) {
        console.log("criteriaElement is something");
        console.log("criteriaElement attribute length is " + criteriaElement.$.attributes.length);
        for (var i = 0; i < criteriaElement.$.attributes.length; i++) {
            console.log("attribute is " + criteriaElement.$.attributes[i].value);
        }
    }
});

测试案例1

当我选择 abc def 的文字时，如下所示



我收到以下日志记录

0 --> abc
1 --> <span criteria="{&quot;animal&quot;:[&quot;DOG&quot;]}">abc</span> def <span criteria="{&quot;animal&quot;:[&quot;CAT&quot;]}">ghi</span>

criteriaElement is something
criteriaElement attribute length is 1

attribute is {"operator":["DOG"]} 

我心中有些怀疑。

1. 我希望elementPath中有2个元素。一个是abc，另一个是def。然而，事实证明，我的第一个元素是abc（正确），我的第二个元素是整个文本（超出我的期望）

测试案例2

我用另一个测试进行测试。这次，我选择 def ghi



我收到以下日志记录

0 --> <span criteria="{&quot;animal&quot;:[&quot;DOG&quot;]}">abc</span> def <span criteria="{&quot;animal&quot;:[&quot;CAT&quot;]}">ghi</span>

我心中有些怀疑

1. 为什么只有1个元素？我希望elementPath中有2个元素。一个是def，另一个是ghi。
2. 虽然测试用例1和测试用例2都包含整个文本的元素，但为什么在测试用例2中，elementPath.contains...什么都不返回？

Answer 1

Elementspath以这种方式与选择无关。它代表插入符号下的元素堆栈。想象一下这样的情况：[]代表选择，|代表插入符号：

<ul>
    <li>Quux</li>
    <li>F[oo <span class="bar">Bar</span> <span class="baz">Ba|]z</span></li>
    <li>Nerf</li>
</ul>

您的选择在视觉上包含文本“oo Bar Ba”，您的插入符号位于a和z之间。那时，elementspath将显示“ul＆gt; li＆gt; span”。另一个span元素“bar”是span元素“baz”的兄弟，因此不显示，只显示优势。

您可以认为插入符只能存在于html TEXT_NODE中，而elementspath会显示该文本节点的优先级。

你想要的是什么？要在当前选择中显示数据？为什么？你想在哪里展示？你想要它展示的方式和原因？我猜你有一种不同的方式来满足你的要求，而不是使用elementspath（我认为这可能是和XY problem）。

---

评论太长：如果您的工具栏按钮操作以具有条件属性的元素为目标 - 如果有一个带有条件属性的跨度和没有条件属性1，那该怎么办？他们的订单是否重要？如果有两个带有条件属性的跨度怎么办？如果它们嵌套如下：<p>F[oo <span criteria="x">Bar <span criteria="y">Ba|]z </span>Quux </span>Xyzzy</p> - 定位将很困难。我建议您在元素路径中添加一个小标记（如果元素具有该属性），而不是单击标记或右键单击您可以编辑/查看条件的元素。您甚至可以通过使用editor.css之类的规则自定义span[criteria]{ color: red; }来直观地显示编辑器中属性的跨度。