jhtmlarea Wiki & Documentation Rss Feed

New Comment on "Modify Editor Programatically using JavaScript"

Millzy — Wed, 27 Mar 2013 14:37:32 GMT

I'm trying to add some custom CSS classes to the iframe or editor side of the WysiWyg editor but can not seem to get them to work when adding the classes. I tried adding them to the iframe but that doesn't work, can anyone help please.

Updated Wiki: Home

crpietschmann — Sun, 10 Mar 2013 16:56:59 GMT

Project Description
A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page. The minified script alone is 9.17kb; CSS and Images it's a total of 25.9kb.

This project also includes Visual Studio JavaScript Intellisense support.

Live Demo: http://pietschsoft.com/demo/jHtmlArea

Key Advantages of jHtmlArea

Free, open source (Microsoft Public License)
Simple and Lightweight - 10kb minified - 23.6kb w/ css and images
Supports all mainstream browsers - IE7/8/9+, Firefox 3+, Safari 4+, Chrome
Built on top of jQuery (requires jQuery 1.3.2 or higher)
Full Documentation

View Documentation for full usage examples

Nuget Package

http://nuget.org/packages/jHtmlArea

Tutorials / Articles

Basic Usage

$(function(){
    $("textarea").htmlarea();
});

Icons

This project also includes icons from the Silk Icon Set by Mark James. You can download the Silk Icon Set here: http://www.famfamfam.com/lab/icons/silk/

Contributors

This project is maintained by Chris Pietschmann. He is a Microsoft MVP for Bing Maps, a Co-Founder of Carto LLC, and the Owner of Simplovation LLC a software development consulting company that specializes in Mapping/GIS related application development.

New Comment on "Modify Editor Programatically using JavaScript"

ilyasf — Tue, 12 Feb 2013 07:41:43 GMT

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);

New Comment on "Display the jHtmlArea Editor"

angelxmoreno — Sat, 22 Dec 2012 18:12:35 GMT

@beesquare I put mine in the head tag inside a "$(function(){" like @nverwer mentioned.

New Comment on "Configure Toolbar Buttons"

angelxmoreno — Sat, 22 Dec 2012 00:14:16 GMT

Cut, Copy, Paste are missing from the list. I assume those are the names of the buttons?

New Comment on "Display the jHtmlArea Editor"

nverwer — Thu, 22 Nov 2012 10:51:52 GMT

The best is to do this when the document is ready. Since you have jquery loaded in the page, just use the following script: <script type="text/javascript"> $(function(){ $('#editor').htmlarea({}) }); </script>

New Comment on "Modify Editor Programatically using JavaScript"

dpluken — Thu, 22 Nov 2012 03:57:16 GMT

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

New Comment on "Configure Toolbar Buttons"

JohnSmith564 — Sun, 11 Nov 2012 10:25:55 GMT

This is great, but why is there no "font-type" or "font-family" button? This is a basic requirement for rich text editors.

New Comment on "Display the jHtmlArea Editor"

beesquare — Thu, 04 Oct 2012 11:25:12 GMT

Hi i am a new php/html/javascript user and this looks wonderful but i have a small problem. Where exactly in the code of my web page do i put this line $('textarea').htmlarea();? Thank u

Updated Wiki: Home

crpietschmann — Sat, 05 May 2012 21:13:38 GMT

Key Advantages of jHtmlArea

Free, open source (Microsoft Public License)
Simple and Lightweight - 10kb minified - 23.6kb w/ css and images
Supports all mainstream browsers - IE7/8/9+, Firefox 3+, Safari 4+, Chrome
Built on top of jQuery (requires jQuery 1.3.2 or higher)
Full Documentation

View Documentation for full usage examples

Tutorials / Articles

Basic Usage

$(function(){
    $("textarea").htmlarea();
});

Icons

This project also includes icons from the Silk Icon Set by Mark James. You can download the Silk Icon Set here: http://www.famfamfam.com/lab/icons/silk/

Contributors

Updated Wiki: Add Custom Toolbar Button

crpietschmann — Sat, 05 May 2012 21:13:06 GMT

Add Custom jHtmlArea Toolbar Button

Not only are the "built-in" toolbar buttons availabe, but completely custom toolbar buttons can be defined. This can be useful for extending the editor with any functionality desired.

Add Custom Toolbar Button

To add a custom toolbar button, instead of specifying the button to use by name, an object literal is passed instead.

Here's an example of the object literal required:

{
    // The CSS class used to style the <a> tag of the toolbar button
    css: 'custombutton',

    // The text to use as the <a> tags "Alt" attribute value
    text: 'Custom Button Tooltip / Description Value',

    // The callback function to execute when the toolbar button is clicked
    action: function (btn) {
        // 'this' = jHtmlArea object
        // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

        // Take some action or do something here
    }
}

Now that the required object literal has been shown, here's an example of it being used along with other toolbar buttons to build a custom toolbar set:

$("textarea").htmlarea({
    // Override/Specify the Toolbar buttons to show
    toolbar: [
        ["html"], ["bold", "italic", "underline", "|", "forecolor"],
        ["h1", "h2", "h3", "h4", "h5", "h6"],
        ["link", "unlink", "|", "image"],
        [
            {
                // The CSS class used to style the <a> tag of the toolbar button
                css: 'custombutton',

                // The text to use as the <a> tags "Alt" attribute value
                text: 'Custom Button Tooltip / Description Value',

                // The callback function to execute when the toolbar button is clicked
                action: function (btn) {
                    // 'this' = jHtmlArea object
                    // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

                    // Take some action or do something here
                }
            }
        ]
    ]
});

Perform Basic Actions from a Custom Toolbar Button

The jHtmlArea API provides a number of methods or actions that can be performed on the editor from within the custom toolbar buttons handler.

Here are a couple examples:

{
    css: "custombutton",
    text: "Custom Toolbar Button",
    action: function(btn) {

        // Paste some specific HTML / Text value into the Editor
        this.pasteHTML("<p></p>");

        // Get the currently selected HTML / Text within the Editor
        var s = this.getSelectedHTML();

        // Set the current selection to Bold
        this.bold();

        // Set the current selection to Italic
        this.italic();

        // Set the current selection to Underline
        this.underline();

        // Center Justify the current selection
        this.justifyCenter();

        // Indent the current selection
        this.indent();

        // Insert horizontal rule or <hr> tag
        this.insertHorizontalRule();

        // Insert an Image by URL
        this.image("http://domain/image.png");

        // Set the Forecolor / Text Color of the current selection
        this.forecolor("#336699");

        // Get the Full HTML that's contained within the Editor
        var html = this.toHtmlString();
    }
}

Further documentation is available within the Modify Editor Programatically using JavaScript article.

Updated Wiki: Add Custom Toolbar Button

crpietschmann — Sat, 05 May 2012 21:10:16 GMT

Add Custom jHtmlArea Toolbar Button

Not only are the "built-in" toolbar buttons availabe, but completely custom toolbar buttons can be defined. This can be useful for extending the editor with any functionality desired.

Add Custom Toolbar Button

To add a custom toolbar button, instead of specifying the button to use by name, an object literal is passed instead.

Here's an example of the object literal required:

{
    // The CSS class used to style the <a> tag of the toolbar button
    css: 'custombutton',

    // The text to use as the <a> tags "Alt" attribute value
    text: 'Custom Button Tooltip / Description Value',

    // The callback function to execute when the toolbar button is clicked
    action: function (btn) {
        // 'this' = jHtmlArea object
        // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

        // Take some action or do something here
    }
}

Now that the required object literal has been shown, here's an example of it being used along with other toolbar buttons to build a custom toolbar set:

$("textarea").htmlarea({
    // Override/Specify the Toolbar buttons to show
    toolbar: [
        ["html"], ["bold", "italic", "underline", "|", "forecolor"],
        ["h1", "h2", "h3", "h4", "h5", "h6"],
        ["link", "unlink", "|", "image"],
        [
            {
                // The CSS class used to style the <a> tag of the toolbar button
                css: 'custombutton',

                // The text to use as the <a> tags "Alt" attribute value
                text: 'Custom Button Tooltip / Description Value',

                // The callback function to execute when the toolbar button is clicked
                action: function (btn) {
                    // 'this' = jHtmlArea object
                    // 'btn' = jQuery object that represents the <a> ("anchor") tag for the toolbar button

                    // Take some action or do something here
                }
            }
        ]
    ]
});

Updated Wiki: Documentation

crpietschmann — Sat, 05 May 2012 21:03:55 GMT

jHtmlArea Documentation

Beginner

Intermediate

Advanced

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 21:02:44 GMT

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

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:56:51 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

// 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.

dispose()

Removes the jHtmlArea editor from the page.

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.

html(htmlString)

link()

Adds a Hyperlink to the currently selection.

image(imageUrl)

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

italic()

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

orderedList

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

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.

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.

toHtmlString()

Returns the HTML String value from within the editor.

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.

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:52:22 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

// 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.

dispose()

Removes the jHtmlArea editor from the page.

getSelectedHTML()

Gets the HTML that is currently selected within the editor.

getSelection()

Gets the current selection within the editor.

html(htmlString)

image(imageUrl)

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

italic()

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

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.

strikeThrough()

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

toHtmlString()

Returns the HTML String value from within the editor.

underline()

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

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:42:13 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

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

dispose()

Removes the jHtmlArea editor from the page.

getSelectedHTML()

Gets the HTML that is currently selected within the editor.

getSelection()

Gets the current selection within the editor.

html(htmlString)

Gets or Sets the HTML in the editor.
htmlString: TODO

image(imageUrl)

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

toHtmlString()

Returns the HTML String value from within the editor.

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:38:39 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

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

toHtmlString()

Returns the HTML String value from within the editor.

image(imageUrl)

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

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:38:02 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

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

toHtmlString()

Returns the HTML String value from within the editor.

image

Inserts an image into the current caret location

Updated Wiki: Modify Editor Programatically using JavaScript

crpietschmann — Sat, 05 May 2012 20:36:44 GMT

Modify jHtmlArea Editor Programatically using JavaScript / jQuery

// Get the HTML String value from within the editor
var html = $('#txtEditor').htmlarea('toHtmlString');

// Insert a specific 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');