检查 CKEditor 内容中 ID 的唯一性

Question

任务： 在CKEditor中添加带有id的锚点时，我想检查整个页面的id的唯一性。

问题： 如果我直接访问 CKEditor 内容，对于具有相同 ID 的元素，它可能有 fakeobjects。

如果我使用 getData() 获取 CKEditor 内容，它将 return 纯 html 而不是 DOM。

问题：在 CKEditor 中检查元素 ID 唯一性的完整且最简单的方法是什么

谢谢！

Answer 1

最快的方法似乎是利用 CKEditor API 和搜索编辑器内容：

具有相同 id 的常规元素。
假元素持有具有相同 id 的常规元素。

使用 CKEDITOR.dom.element.find method:

可以轻松找到具有相同 ID 的常规元素

var sameIdNode = [],
    regularNodes = editor.editable().find( '[id=' + id + ']' ).toArray();

CKEDITOR.tools.array.forEach( regularNodes, function( node ) {
    // Check if it is not a fake element.
    if ( !node.getAttribute( 'data-cke-realelement' ) ) {
        sameIdNodes.push( node )
    }
} );

与假元素类似，但其真实内容需要解码才能搜索：

var fakeNodes = editor.editable().find( '[data-cke-realelement]' ).toArray(),
    realElement = null,
    sameIdNodes = [];

// Check fake elements.
CKEDITOR.tools.array.forEach( fakeNodes, function( node ) {
    // Decode realelement and convert into CKEDITOR.dom.element so `find` could be used. Wrap in a `div` so find will also check outermost element.
    realElement = CKEDITOR.dom.element.createFromHtml( '<div>' + decodeURIComponent( node.getAttribute( 'data-cke-realelement' ) ) + '</div>' );
    sameIdNodes = sameIdNodes.concat( realElement.find( '[id=' + id + ']' ).toArray() );
} );

对于有效的简单示例，请检查 this codepen。

检查 CKEditor 内容中 ID 的唯一性

Check uniqueness of ID inside CKEditor content

html

javascript

jquery

ckeditor