Manually setting value in TinyMCE with jQuery

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


Step 2: Get the contents of the iFrame


Step 3: Find the 'body' element


Step 4: Set the value using html() function

$('#mce_editor_0').contents().find('body').html('my html content');


Popular posts from this blog

Induction Cooker Showing an Error Code? Induction Cooker Error Codes Explained

LICHFL - Generating Home Loan Statements Online

HDFC Bank introduces Missed Call Service to know Account Balance