How tinymce does map html code of wysiwyg and output of textarea which is stored to database?

Question

When you click on the 'image' button you will insert image into wysiwyg. When you click on the inserted image you will see some blue border on the image. If you inspect it border in firebug you will see it is an inserted div into wysiwyg. Also when you will compare content of iframe and content of textarea (where tinymce store editor output) you will see different html code.

How tinymce does map html code from iframe and output html code from textarea?

Do you know how do this any of existing editors?

Answer 1

In general if you inspect the contents of the TinyMCE editor iFrame you will see things that you do not get when the content is returned via getContent(). The editor does a variety of internal things during an editing session that are needed for TinyMCE to function properly. These are removed when you get the content from TinyMCE so they should have no impact on your ability to get, store, and reload your content via TinyMCE.

For the specific case you mention...

If you click on an image in the editor you get resize handles and a border on the image - these are so you can perform some manipulations on the image.

When you ask TinyMCE for its content (via getContent()) you would not get these div tags used for controlling the UI of the editing process.