jHtmlArea is a simple, light weight, extensible WYSIWYG HTML editor built on top of jQuery.
To use this plugin you need to download the package here. The zip file contains samples on how to initialize the editor with different options and custom buttons. In this example we will create an editor with a colorpicker.
1.) Unpack the files, you’ll notice there are multiple files and folders, but we only need the following files:
- scripts/jHtmlArea.ColorPickerMenu-0.7.0.js
- scripts/jHtmlArea-0.7.0.js
- style/jHtmlArea.ColorPickerMenu.css
- style/jHtmlArea.css
- style/jHtmlArea.Editor.css
2.) Create the same directory structure and copy / paste the files listed above.
3. ) Create the index file and add the following in the head section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Using jHtmlArea - WYSIWYG HTML Editor for jQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/jHtmlArea-0.7.0.js"></script> <script type="text/javascript" src="scripts/jHtmlArea.ColorPickerMenu-0.7.0.js"></script>
4.) The snippet initializes the editor and create the custom buttons
<script type="text/javascript">
$('document').ready(function(){
$(function() {
$("#txtDefaultHtmlArea").htmlarea({
toolbar: ["html", "|",
"forecolor", // <-- Add the "forecolor" Toolbar Button
"|", "bold", "italic", "underline", "|", "p", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
});
});
});
</script>
5.) Link the stylesheets and add the rest of the elements.
<link rel="Stylesheet" type="text/css" href="style/jHtmlArea.css" /> <link rel="Stylesheet" type="text/css" href="style/jHtmlArea.ColorPickerMenu.css" /> </head> <body> <h1>Using jHtmlArea - WYSIWYG HTML Editor for jQuery</h1> <textarea id="txtDefaultHtmlArea" cols="50" rows="15"><h3>Lorem ipsum</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></textarea> </body> </html>
One Comment
what kind of webopage you make like this…