How to load html using jquery into a TinyMCE textarea

14
votes

I've a textarea that uses TinyMCE as a WYSIWYG. Once that this textarea is loaded I want that, clicking a button "Edit" some html code that I bring with AJAX jquery is loaded in that textarea.

I want to insert this html code <p>hello</p>

Original textarea source

<textarea name="corpo" id="input_corpo">Text Here</textarea>

JQUERY Script that brings the HTML. In this way it updates only the textarea (which is hidden while TinyMCE is in action)

$.get("hello.html", 
        function(content){ $("#input_corpo").text(content);});
     return false;});

Neither in this way below it works. I tryed to update the body of the iframe that generates TinyMCE

$.get("hello.html", 
    function(content){ $("body#tinymce").text(content);});
return false;});

How can I do?

2
jquerytinymcetextarea

2 Answers

30
votes

You could try with the setContent function:

$.get("hello.html", function(content) { 
    // if you have one tinyMCE box on the page:
    tinyMCE.activeEditor.setContent(content);
});

or even shorter:

$.get("hello.html", tinyMCE.activeEditor.setContent);
2
votes

Using the jQuery version of tinyMCE with jQuery plugin you could use this

$.get("hello.html", function(content) { 
    $('#input-corpo').html(content);
});