TinyMCE is one of the widely used free WYSIWYG HTML editor which is released under Lesser GPL. TinyMCE replaces your text area with its own rich text editor.
You can use the inbuilt JavaScript function setContent() to set content in to the editor:
tinyMCE.activeEditor.setContent('my html content');
Recently I was working on a Google Chrome extension where I wanted to set custom values in to a TinyMCE editor from the content script. By design Chrome does not allow access to the JavaScript variables or functions of the page from content script but only DOM elements.
So, I had to use jQuery to find the underlying element structure and set the value as described below:
Step 1: Get the iFrame of TinyMCE
$('#mce_editor_0');
Step 2: Get the contents of the iFrame
$('#mce_editor_0').contents();
Step 3: Find the 'body' element
$('#mce_editor_0').contents().find('body');
Step 4: Set the value using html() function
$('#mce_editor_0').contents().find('body').html('my html content');