javascript - CKEDITOR.document 和 CKEDITOR.dom.document 有什么区别？

Question

在 ck-editor 文档中，CkEDITOR.dom.document 被定义为 -

Represents a DOM document.

示例为 -

var document = new CKEDITOR.dom.document( document )

这个函数的参数“document”应该是什么？

同样在 CKEDITOR 核心代码库中给出了这个定义 -

CKEDITOR.document = new CKEDITOR.dom.document( document );

表示 CKEDITOR.document 是包含 CKEDITOR 实例的窗口的文档。例如，可以从窗口的 DOM 中获取任何内容 -

alert( CKEDITOR.document.getBody().getName() ); // 'body'

我对两者的意义以及如何不同地使用它们、在哪里使用它们感到困惑？

谢谢。

Answer 1

CKEDITOR.document

如您所见CKEDITOR.document定义如下

CKEDITOR.document = new CKEDITOR.dom.document( document );

这意味着它是最顶层 document对于 CKEditor 库。这是包含和加载库的文档。通常也是网页最顶层的文档

window.document === CKEDITOR.document.$ // true

CKEDITOR.document也是所有CKEditor的通用文档inline instances .因此，如果您创建许多这样的

var i1 = CKEDITOR.inline( 'inline1' );
var i2 = CKEDITOR.inline( 'inline2' );

你会注意到他们共享同一个文档

i1.document.equals( CKEDITOR.document ); // true
i2.document.equals( CKEDITOR.document ); // true 

因为所见即所得编辑直接进入 contenteditable CKEDITOR.document 中的元素.

CKEDITOR.document和 editor.document

另一方面，网页中可能有很多子文档，即因为每个<iframe>表示新window和 window.document 。这正是您创建 classic editor instance 时发生的情况。这带来了一个新的 <iframe>与 contenteditable用于编辑的正文(是的，您正在编辑 <iframe> 中的文本，而不是 <textarea> )。

您可能会注意到每个实例都有自己独立的 document ( CKEDITOR.editor-property-document ) 而那些文件与 CKEDITOR.document 无关.

var c1 = CKEDITOR.replace( 'textarea1' );
var c2 = CKEDITOR.replace( 'textarea2' );

c1.document.equals( CKEDITOR.document ); // false
c2.document.equals( CKEDITOR.document ); // false
c1.document.equals( c2.document ); // false

每个实例调用new CKEDITOR.dom.document( documentWithinAnIframe )并将其分配给 editor.document .

结论

总结一下

• CKEDITOR.document 是最顶层的 document其中包含并加载了 CKEditor 库。
• editor.document 是与编辑器实例关联的文档。全部inline instances共享同一文档 ( CKEDITOR.document ) 而所有 classic instances有自己的文件。
• CKEDITOR.dom.document 是 CKEditor 库的构造函数，它将 native DOM 文档包装到 CKEDITOR.dom.domObject 中，向用户公开漂亮的 API(如 equals() 方法)以便在代码中进行操作。
  • 它类似于 CKEDITOR.dom.element 但用于文档而不是元素。
  • 两者都是 CKEDITOR.document和 editor.document是 CKEDITOR.dom.document 的实例.