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');

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to our feed and get articles like this delivered automatically to your feed reader? Like our Facebook Page.

Post a Comment (0)
Previous Post Next Post