CODEWITHSUNDEEP
javascripthtmltinymcetextarea
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

Set textarea value with javascript after TinyMCE initializing

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

Upvotes: 36

Views: 68764

Answers (7)

Ryan Monreal
Ryan Monreal

Reputation: 597

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

This Works For Latest Version 6.8.2

Check this Answer

Upvotes: 15

Rana Nadeem
Rana Nadeem

Reputation: 1225

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.

Upvotes: 0

Jeffrey Davidsz
Jeffrey Davidsz

Reputation: 41

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.

Upvotes: 1

Rosidin Bima
Rosidin Bima

Reputation: 237

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

Upvotes: 0

Thariama
Thariama

Reputation: 50832

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>');

Upvotes: 43

AtanuCSE
AtanuCSE

Reputation: 8940

Simply this works for me

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

Upvotes: 2

user2556716
user2556716

Reputation: 23

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

    <textarea> html CONTENT</textarea>

Upvotes: -6

Related Questions