Set textarea value with javascript after TinyMCE i

Question

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....

Answer 1

Problem here is you won't see anything if you enter text or html into your textarea. Your textarea gets hidden when tinymce gets initialized. What you see then is a content editable iframe, which is used to edit and style content. There are several events which will cause tinymce to write its content to the html source element of the editor (in your case your textarea).

If you want to set the content of the editor (which is visible) you will need to call something like

tinymce.get('title').setContent('<p>This is my new content!</p>');

You may also acces the dom elements directly using the following

tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';

or using jQuery

$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');

Answer 2

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.

Answer 3

It works for me. Just place it inside your html code instead of going tinymce

    <textarea> html CONTENT</textarea>

Answer 4

Simply this works for me

$("#description").val(content);

Answer 5

<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.

Answer 6

You can use the tinyMCE.activeEditor.setContent('<span>some</span> html');

Check this Answer