HTML generated for RichTextArea: what is #document?

dom, gwt, html, javascript

Solution

It's the `Document` node of the document inside the iframe. All `Document` nodes have a `nodeName` property of "#document", which you can see by examining `document.nodeName`. Chrome's developer tools are probably handling the iframe by adding an expansion of the iframe's `contentDocument` property as a child of the iframe expansion.

As to the document being editable, it's very common for WYSIWYG editors to use an iframe for the editable content. All current browsers allow built-in editing functionality on any element via the `contenteditable` attribute, and also at a document level via the `document.designMode` property.

Problem

I can see in Chrome Develoer Tools that html generated for GWT's `RichTextArea` widget is something like this: ``` <iframe class="GCJ2VDKDEI" style="height: 40px; "> #document <html> <head></head> <body>entered text</body> </html> </iframe> ``` Could somebody desribe how it works? How is it possible that page embedded in `<iframe>` is editable for user (looks and behaves like text area)? I would especially like to know what is that strange `#document` thing. It's first time I see something like this and Google gives me no answers :(.

Original source