Question

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

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

如果我用getData（）获取CKEditor内容，它将返回普通的html而不是DOM。

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

谢谢！

Answer 1

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

具有相同身份的常规元素。
伪元素包含具有相同ID的常规元素。

使用CKEDITOR.dom.element.find method：

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的唯一性

1 个答案: