Modify jHtmlArea Editor Programatically using JavaScript / jQuery

All jHtmlArea toolbar buttons and a few other methods can be executed programmatically via JavaScript / jQuery.

Using jQuery, the method is specified by name along with passing any necessary parameters.

Here are a couple examples:
// Get the HTML String value from within the editor
var html = $('#txtEditor').htmlarea('toHtmlString');

// Insert an image into the current caret location
// First Argument = The method name
// Second Argument = The argument accepted by the "image" method
$('#txtEditor').htmlarea('image', 'http://localhost/image.jpg');

jHtmlArea Methods

bold()

Toggles the "Bold" state of the currently selected text.

copy()

Performs a clipboard "Copy" operation.

cut()

Performs a clipboard "Cut" operation.

decreaseFontSize()

Performs the same action as the "decreasefontsize" toolbar button.

dispose()

Removes the jHtmlArea editor from the page.

forecoloe()

Performs the same action as the "forecolor" toolbar button.

getSelectedHTML()

Gets the HTML that is currently selected within the editor.

getSelection()

Gets the current selection within the editor.

h1()

Performs the same action as the "h1" toolbar button.

h2()

Performs the same action as the "h2" toolbar button.

h3()

Performs the same action as the "h3" toolbar button.

h4()

Performs the same action as the "h4" toolbar button.

h5()

Performs the same action as the "h5" toolbar button.

h6()

Performs the same action as the "h6" toolbar button.

hideHTMLView()

Toggles the display of the WYSIWYG view within the editor.

html(htmlString)

Gets or Sets the entire HTML contents within the editor.
htmlString:
If value is specified, then the HTML contents of the editor is set to that value.
If not specified, then the HTML contents fo the editor is returned.

link()

Adds a Hyperlink to the currently selection.

indent()

Performs the same action as the "indent" toolbar button.

image(imageUrl)

Inserts an image into the current caret location
imageUrl: The URL of the image to insert.

increaseFontSize()

Performs the same action as the "increasefontsize" toolbar button.

italic()

Toggles the "Italic" state of the currently selected text.

justifyCenter()

Performs the same action as the "justifycenter" toolbar button.

justifyLeft()

Performs the same action as the "justifyleft" toolbar button.

justifyRight()

Performs the same action as the "justifyright" toolbar button.

orderedList()

Toggles an Ordered List "<ol>" on the current selection.

outdent()

Performs the same action as the "outdent" toolbar button.

p()

Performs the same action as the "p" toolbar button.

paste()

Performs a clipboard "Paste" operation.

pasteHTML(htmlString)

Adds HTML content to the currently selected area within the editor.
htmlString: The HTML string to add.

removeFormat()

Removes all formatting from the currenlty selected text.

showHTMLView()

Toggles the display of the Raw HTML view within the editor.

strikeThrough()

Toggles the "Strike Through" state of the currently selected text.

subscript()

Performs the same action as the "subscript" toolbar button.

superscript()

Performs the same action as the "superscript" toolbar button.

toggleHTMLView()

Toggles between Raw HTML view and WYSIWYG view within the editor.

toHtmlString()

Returns the HTML String value from within the editor.

toString()

Returns a string value (without HTML markup) of the editors contents.

underline()

Toggles the "Underline" state of the currently selected text.

unlink()

Removes the Hyperlink from the current selection.

unorderedList()

Toggles an Unorderd List "<ul>" on the current selection.

updateHtmlArea()

Forces the editor to update its contents with the current contents of the underlieing "<textarea>"

Last edited May 5, 2012 at 10:02 PM by crpietschmann, version 7

Comments

pcj_cds Jan 11, 2016 at 6:19 PM 
updateHtmlArea doesn't seem to work at all now. Had to do it directly using jQuery:
$(".jHtmlArea").find("iframe").contents().find("body").html(content);

macielo Jul 4, 2014 at 3:58 PM 
Hi, mmm I'm confused on how to use the forecoloe function, I currently have:

$(".wyswyg").htmlarea({ toolbar: [["html"],["bold","italic","underline","strikethrough"],["b","h1","h2","h3","h4","h5","h6"]]});

but I wanted to add a forecolor default to white (#fff).

martinrimoldi Apr 8, 2014 at 5:08 AM 
I only need functions and a toolbar button to insert a table into a textarea and browse an image into the disk drive.

How can I develop these functions?
Thanks
Martín

martinrimoldi@hotmail.com

neilpimley Nov 8, 2013 at 12:09 PM 
I found I had to update the textarea then call the updateHtmlArea function

$("textarea.item-content").html(content);
$("textarea.item-content").htmlarea('updateHtmlArea',content);

ilyasf Feb 12, 2013 at 7:41 AM 
dpluken Nov 22, 2012 at 7:57 AM
TypeError: $("textarea.item-content").updateHtmlArea is not a function
[Break On This Error]

$('textarea.item-content').updateHtmlArea(content);

Use - $("textarea.item-content").htmlarea('updateHtmlArea',content);

dpluken Nov 22, 2012 at 3:57 AM 
TypeError: $("textarea.item-content").updateHtmlArea is not a function
[Break On This Error]

$('textarea.item-content').updateHtmlArea(content);

what am I missing... I am trying to load content into the htmlArea to let the user edit it. I see it in the textarea (hidden) but not in the rich text area... thanks in advance for any guidance!!!