jQuery: Batiste Rich-Text Editor -- how to update content?

Question

Hello,

I'm using this lightweight jQuery plugin to create a rich-text editor:Batiste RTE jQuery Plugin

As part of a more complex form, I have the functionality of clearing changes and I want to be able to do this for the editor as well.

I keep the initial content in a variable, and I want to do something like: setContent(INITIAL_CONTENT), but I can't find a way to access the RTE object because $("textarea").rte(some-options-here) returns the textarea object rather than the rte object.

Any idea on how to make this happen?

Answer 1

The RTE replaces the textarea with an iframe but keeps the same ID. To access the contents of the iframe try something like this.

$("#textarea_ID").contents().find("body").html(INITIAL_CONTENT);

Answer 2

I would just echo what Shaun said here, but I would also like to give an example of it in action. Note that one of the things that this example does is store off the INITIAL_CONTENT in a global variable because the RTE control replaces the textarea, not hides it, which I find a little unnerving.

If you're concerned about it being in a global variable, you could probably store the initial contents off in some member of the DOM after it's created, but that's probably unnecessary for your purposes.

The example of what you are trying to accomplish: http://jsbin.com/ixipu

Answer 3

You may grab the body from the iframe and then set/get the contents:

var $R = function(sel, newContent) {
    return $('body', $(sel).contents()).html(newContent || undefined); 
};
var iframe = $('iframe.rte-zone')[0];
alert($R(iframe)); // alerts the RTE's content
$R(iframe, '<strong>Lorem <em>ipsum</em></strong>'); // sets the content of the RTE to "<strong>Lorem <em>ipsum</em></strong>"

You may also have a look at some examples if you want to.

Cheers :)