Skip to content

Modify jHtmlArea Editor Programatically using JavaScript jQuery

Chris Pietschmann edited this page Sep 2, 2017 · 1 revision

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.

forecolor()

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 "

    " 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>"