CODEWITHSUNDEEP
javascripttinymcewysiwyg
M Sach
M Sach

Reputation: 34424

How to populate tinymce with some content on trigger of javascript event?

i want to populate the tinymce body with some content on trigger of onchange event of selectbox in javascript. I tried some stuff but it did not work for me.Please guide me in right direction. Here is the my code that appends the tinymce on textarea

$(function() {
appendTinyMCE();
function appendTinyMCE(){
    tinyMCE.init({

        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "preview",
        // Theme options
        theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
        theme_advanced_buttons2 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true

});}

});

here is the html code

<td>
        <textarea rows="15" name="MyTinymceContent" cols="90" >MyTestContent</textarea>

Now i want to populate the tinymce with new content , on change of select box in javascript. So i write the below code snippet on change of select box

 function populateMyTinyMCE() {
  document.form.MyTinymceContent.value ="MyNewContent";
 }

But it does not put the new content in tinymce body. I am not sure what i am missing here?

Upvotes: 2

Views: 3296

Answers (4)

cssyphus
cssyphus

Reputation: 40106

Here's what I missed in the above (and other online) examples.

This is the correct format:

tinymce.get('your_textarea_id').setContent(var_with_html);

HOWEVER (!)

  1. The ID string cannot have the # prefix. If the element has id="bob" then the command is .get('bob') NOT .get('#bob')

  2. Only IDs can be used, not class names

This is the 2nd time I've had to solve this, so answering this question for my future self as much as for other devs.

Upvotes: 0

Nps
Nps

Reputation: 1658

Try

tinyMCE.activeEditor.setContent("MyNewContent");

Upvotes: 0

Thariama
Thariama

Reputation: 50830

Tinymce is not equal the textarea. On initialization of the editor a contenteditable iframe get created. This iframe holds the editor content and gets written back into the editor source html element (in your case a textarea) from time to time. To set the editor content you need to use the tinymce setContent function. I will show the alternatives too:

 function populateMyTinyMCE() {

    var editor = tinymce.editors[0];

    // other ways to get the editor instance
    // editor = tinymce.get('my editor id');
    // editor = tinymce.activeEditor;

    editor.setContent('my new content');

    // alternate way of setting the content
    // editor.getBody().innerHTML = 'my new content';
 }

Upvotes: 3

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

You can call any of following on some event trigger:

tinyMCE.get('your_editor').setContent("MyNewContent");
//OR
tinyMCE.activeEditor.setContent('MyNewContent');

See: Here for More

Upvotes: 2

Related Questions