Search code examples
javascriptjqueryckeditorfckeditor

How to mimic/implement a WYSWYG editor on a web page?


All I know is that it uses a IFRAME tag as it's presentation layer, how does it store the data, how does it switch between WYSIWYG mode and source mode?


Solution

  • Most in-browser WYSIWYG editors (Google Docs is a notable exception) use the contenteditable attribute to make an element editable.

    The data doesn't need to be stored in any special way, it's just the HTML content of the editable node.

    Switch to source mode by dumping the innerHTML of your editable element into a textarea, showing the textarea, and hiding the editable element.

    You can find lots of information and tutorials by googling contenteditable.