Display the jHtmlArea Editor - crpietschmann/jHtmlArea GitHub Wiki

jHtmlArea has only one dependency: jQuery. Since it is a jQuery plugin, it does require you to include the jQuery library within your page.

To use jHtmlArea, all you need to do is place a stander HTML <textarea> on the page, and execute a single line of JavaScript code (using jQuery) to turn that {<textarea>} into a jHtmlArea editor.

Step 1: Add a <textarea> to the page

<textarea></textarea>

Step 2: Add jHtmlArea library, css and images to your website folder structure.

Step 3: Add a reference to the jHtmlArea CSS file to your page

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/crpietschmann/[email protected]/dist/css/jHtmlArea.css">

Step 4: Add a reference to the jHtmlArea library to your page

<script src="https://cdn.jsdelivr.net/gh/crpietschmann/[email protected]/dist/js/jHtmlArea.js"></script>

Step 5: Add single line of JavaScript / jQuery code to turn the <textarea> into a jHtmlArea Editor

$('textarea').htmlarea();

jHtmlArea and TextAreas can be mixed within the same page since the line of JavaScript / jQuery code to turn a standard <textarea> into a jHtmlArea (as shown above) uses a CSS selector.

Here's some example HTML for two TextAreas:

<textarea id='txtPlain'></textarea>
<textarea id='txtEditor'></textarea>

And, here's the matching JavaScript / jQuery code to turn just the txtEditor TextArea into a jHtmlArea:

$('#txtEditor').htmlarea();