Manually setting value in TinyMCE with jQuery - Texient - Learn 'n Share

Texient - Learn 'n Share

News & Articles on Technology, Finance & Marketing

Breaking

Home Top Ad

Monday, 5 November 2012

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

$('#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');

No comments:

Post a Comment

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.