CODEWITHSUNDEEP
jqueryjquery-mobiletinymce
Todd Vance
Todd Vance

Reputation: 4721

Fill TinyMCE textarea using JQuery (mobile)

So I init my textarea and now its a TinyMCE box...great.

But I want the user to choose a some data and then fill in that textarea with that data (which is HTML btw) ... I was using this code:

 var text = file.rows.item(0).presentData;
    if (text != null) {
        text = text.replace(/\n/g, '<br />');
        $('#editcontent').val(text);

#editcontent being a textarea... this worked fine until I added TinyMCE. Now when I hit this page, the contents are not filled in.

Any ideas?

Upvotes: 1

Views: 1781

Answers (4)

evilReiko
evilReiko

Reputation: 20503

Try this:

var newtext = 'some text';
tinyMCE.get('editcontent').setContent(newtext);

Upvotes: 2

Todd Vance
Todd Vance

Reputation: 4721

I was calling init at the load and then tried to do it again after I filled in the text... what finally worked for me was to call it like that AFTER I filled in my textarea box.

 if (text != null) {
    text = text.replace(/\n/g, '<br />');
    $('#editcontent').val(text);     
}
else {
    text = '<div style="margin: 10%"><h2>This is a blank presentation.  Click edit.</h2></div>';
    $('#editcontent').val('');
}

$('textarea#editcontent').tinymce({
    mode : "textareas",
    theme : "advanced",
    plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

    theme_advanced_buttons1 : "formatselect,bold,italic,underline,strikethrough,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,undo,redo,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,charmap",
        theme_advanced_buttons2 : '',
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "none",
        theme_advanced_resizing : true,
});

Upvotes: 1

David M&#229;rtensson
David M&#229;rtensson

Reputation: 7620

As Jasper states, fill the textarea first.

What TinyMCE does is hide your textarea and place an editable Iframe in its place.

If you cannot fill the textarea before you might check you live code with firebug or some similar solution to see what the Ifram gets as name or ID or if you can specify an id.

Then use that to access the Iframe instead.

Upvotes: 2

Jasper
Jasper

Reputation: 76003

What about initializing the TinyMCE instance after you have set the value of your textarea?

 var text = file.rows.item(0).presentData;
    if (text != null) {
        text = text.replace(/\n/g, '<br />');
        $('#editcontent').val(text).tinymce(...);

I'm not sure if that's how you initialize TinyMCE but if you initialize it after the $('#editcontent').val(text) line then it should work with your data.

You can also "refresh" the content of your TinyMCE instance.

  1. http://www.tinymce.com/forum/viewtopic.php?id=25909
  2. How do I refresh TinyMCE for the code that I add with JavaScript
  3. How to refresh tinymce iframe?
  4. http://www.tinymce.com/wiki.php/Command_identifiers

Upvotes: 1

Related Questions