Set textarea value with javascript after TinyMCE initializing

user_1018270 0
Viewed 63833

I hava an textarea and I am using tinyMCE on that textarea.

What I am doing actually is that when the page is opened, I am populating the textarea with some text, and after that I am initializing the tinyMCE.

The problem is when I am trying to change the value of the textarea after tinyMCE initializing, then nothing happens.

Here is an example.

  1. Creating the textarea: 

    <textarea style="width: 95%;" name="title"  id="title"></textarea>

  2. Populating the textarea:

    $('#title').html("someText");

  3. Initializing tinyMCE

    tinyMCE.init({
        // General options
        mode : "specific_textareas",
        theme : "advanced",
        width: "100%",
        plugins : "pagebreak,paste,fullscreen,visualchars",

        // Theme options
        theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword",
        theme_advanced_buttons2 :"",
        theme_advanced_buttons3 :"",
        theme_advanced_buttons4 :"",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        valid_elements : "i,sub,sup",
        invalid_elements : "p, script",
        editor_deselector : "mceOthers"
    });

  4. I would like to change the content of the textview (but it is not working)

I have tryed to use the same as before init the tinyMCE

    $('#title').html("someModifiedText"); // does not work

I have also tryed to remove tinyMCE:

    if(tinyMCE.getInstanceById('title'))
    removeTinyMCE("title");

With 

function removeTinyMCE (dialogName) {
    tinyMCE.execCommand('mceFocus', false, dialogName);
    tinyMCE.execCommand('mceRemoveControl', false, dialogName);

}

And thet to reuse:

    $('#title').html("someModifiedText"); // does not work

I am out of ideas... Thank you very much for your help....

textarea tinymce html javascript
7 Answers
<textarea id="content" name="content">{{html_entity_decode($yourstringdata)}}</textarea>

This is work for me, Decode your html data and place it between start and closing textarea tags.

user_61383020

I had the same problem solved by making sure the setContent was done after the document is ready, so first;

script(type="text/javascript").
  tinymce.init({
    selector: '#title',
    height: 350,
    menubar: false
  });

then

script(type='text/javascript').
  $(document).ready(function(){
    tinymce.get('title').setContent('<span>someText</span> is html');
  })

Above is code for pug, but the key is -as mentioned- to load it on document ready.

user_134092670

once call this

tinymce.triggerSave();

then value of tinymce will be transferred to the original textarea value. So so can get that as you get from normal textarea.

user_129107650
Related