Print
PDF
19
October
2011

Update value of a tinyMCE enhanced field in javascript

TinyMCE is one of the very popular editors that been used in variety of applications. If you want to give user more flexibility and options on what he enters to a text area field then tinymce is the simplest way to achieve it.

The other day I had a requirement to update one such value of a text area that was enhanced by tinymce. To starters a simple code to make all your text areas in a page to a tinymce enabled field is as below (you also need to include the tinymce javascript library in your page before this)

 

tinyMCE.init({

mode : "textareas",

theme : "advanced",

theme_advanced_buttons1 : "bold,italic,underline,separator,link,unlink,code",

theme_advanced_buttons2 : "",

theme_advanced_buttons3 : "",

theme_advanced_toolbar_location : "top",

convert_urls : false,

theme_advanced_toolbar_align : "left",

extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"

});

Now my requirement was that when user enters some field, I had to update the value in one of the text areas after making some ajax call. A simple field update would not work here since the field is no more a simple textarea field. After doing some research I found the following simple solution to this problem (I am using jquery here)

 

$("#mytextarea").val(comments);

tinyMCE.updateContent("mytextarea");

 

The above two lines of code did the trick to me. Hope this finds helpful to somebody looking forward

 

Author: pradeep