CODEWITHSUNDEEP
javascripttinymcetextarea
Milos Cuculovic
Milos Cuculovic

Reputation: 20223

setContent of an textarea with tinyMCE

I have some textareas and all of them are with tinyMCE.

I would like to set the content of the specific textarea, but I can't find how.

I have tryed this:

 tinyMCE.get('title').setContent(selected_article_title);

here is my textarea:

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

And here my tinyMCE init:

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"
});

I don't know why this is not working, I am using the exemple from the tinyMCE website http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent

Upvotes: 21

Views: 70529

Answers (11)

Mac Lotsen
Mac Lotsen

Reputation: 53

All given answers won't work for me (using v6.4.2). I think the content is set too early and even if putting code after initialization of TinyMCE the change won't get noticed at all.

The workaround is not too dirty luckily. After trying some timeouts I noticed it'll only work after a while. If you set the content in the init_instance_callback option, it will work definitely.

Example:

const content = "..."
const textarea = document.querySelector('#title');
tinymce.init({
  target: textarea,
  ...
  init_instance_callback(editor) {
    editor.setContent(content);
  }
});

Upvotes: 1

thooyork
thooyork

Reputation: 495

I'm a bit late to the party, but since tinyMCE version 5 you should use:

tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content');

Upvotes: 1

Ssadiq Roy
Ssadiq Roy

Reputation: 51

I just wrote this instead of setContent

const textarea = document.querySelector('#title')
textarea.innerHTML = selected_article_title

and it worked

Upvotes: 0

Thariama
Thariama

Reputation: 50840

Using this

tinyMCE.get('title').setContent(selected_article_title);

won't work. It will set your editor content.

To set the editor source html element (the textarea) you will need to set it directly using

$('#title').html(selected_article_title);

You need to be aware that your editor is not the same thing as the textarea!

Upvotes: 4

Ben Long
Ben Long

Reputation: 383

In TinyMCE 5, you can do this using the setContent() method.

Let’s say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call setContent(). For example:

tinymce.get('myTextarea').setContent('<p>Hello world!</p>');

Or, instead of accessing the editor by id, you can access the active editor:

tinymce.activeEditor.setContent('<p>Hello world!</p>');

More info and examples here: https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce.

Upvotes: 4

Ryan Monreal
Ryan Monreal

Reputation: 597

I think this will solve your problem

it works fine for TinyMCE v:4..

// Sets the HTML contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html');

// Sets the raw contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});

// Sets the content of a specific editor (my_editor in this example)
tinyMCE.get('my_editor').setContent(data); // here my_editor is the id of a specific editor

// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinyMCE.activeEditor.setContent('[b]some[/b] html', {format : 'bbcode'});

the link for the code is TinyMCE setContent

Upvotes: 19

Moses Kirathe
Moses Kirathe

Reputation: 332

$('#title').html(selected_article_title);

Make sure that selected_article_title does not contain any html tags.

Upvotes: 0

Shane McQuillan
Shane McQuillan

Reputation: 126

The following works with tinymce version 4, and doesn't show the editor as a textarea while it's being dragged:

function initializeEditors() {
    var editorContent = {};
    $("#photo-list").sortable({
        start: function (e, ui) {
            $('.attachment-info').each(function () {
                var id = $(this).attr('id');
                editorContent[id] = tinyMCE.get(id).getContent();
            });
        },
        stop: function (e, ui) {
            $('.attachment-info').each(function () {
                var id = $(this).attr('id');
                tinymce.execCommand('mceRemoveEditor', false, id);
                tinymce.execCommand('mceAddEditor', true, id);
                tinyMCE.get(id).setContent(editorContent[id]);
            });
        }
    });
}

Upvotes: 0

benchpresser
benchpresser

Reputation: 2188

If you set a content which contains mso tags, (a html content generated from outlook2013, which contains numbered list for example), you loose the list elements. Setting through tinymce.activeEditor.setContent(foo) or first setting textarea content and then initializing tinymce gives the same result, we can not see list elements properly, they are left aligned. But if we set using setContent(foo, { format:'raw' }) wee see the list elements properly. Why?

Upvotes: 0

Tom
Tom

Reputation: 1106

For tinymce version 4, 

tinymce.get('title').setContent(selected_article_title);

works just fine - also after initializing the editor.

Upvotes: 13

Milos Cuculovic
Milos Cuculovic

Reputation: 20223

I have the solution (thans to Thariama who gives me some elements)

To set the content of an textarea using tinyMCE, we heve to fill in the textarea before init the tinyMCE. Also, the response is as follows:

  1. Create the textarea: 

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

  2. Set the content of the textarea:

    $('#title').html(selected_article_title);

  3. Init the 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"
});

And it's done ! Enjoy.

Upvotes: 14

Related Questions