Introduction
This simple article presents a very simple example to use the "Cleditor" jQuery plugin for HTML rich text editing.
Background
It has been a while since my last web application that needs to support on-line rich-text editing. Recently, I picked up this topic again and studied the "Cleditor". I found it very nice and easy to use. I felt that I need to document it with a small example, in case I may need to use it again. I hope this small example can also help other people who may want to have rich-text editing support in their web applications.
The attached web application is developed in Visual Studio 2010.
- In the "Script" folder, I added the JavaScript files for "jQuery" and "
Cleditor". - The CSS styles needed by the "
Cleditor" are in the "Content/cleditor" folder. - The "Default.htm" file is the place where I will show you how to use the "
Cleditor".
You can download the JavaScript files and CSS styles for the "Cleditor" from here.
Example Code
The "Cleditor" is very easy to use. You can see it from the "Default.htm" file:
<!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>
<title>Cleditor Example</title>
<link href="Content/cleditor/jquery.cleditor.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.cleditor.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
width: 400,
height: 200,
controls: "bold italic underline strikethrough subscript superscript |
font size " +
"style | color highlight removeformat | bullets numbering |
outdent " +
"indent | alignleft center alignright justify | undo redo | " +
"rule link image unlink | cut copy paste pastetext | print source"
};
var editor = $("#editor").cleditor(options)[0];
$("#btnClear").click(function (e) {
e.preventDefault();
editor.focus();
editor.clear();
});
$("#btnAddImage").click(function () {
editor.execCommand("insertimage",
"http://images.free-extras.com/pics/s/smile-1620.JPG", null, null);
editor.focus();
});
$("#btnGetHtml").click(function () {
alert($("#editor").val());
});
});
</script>
</head>
<body>
<div style="width: 400px">
<div>
<textarea id="editor" rows="0" cols="0"></textarea>
</div>
<div class="normaldiv" style="float: right">
<a href="#" class="siteButton" id="btnClear">Clear</a>
<a href="#" class="siteButton" id="btnAddImage">Add an image</a>
<a href="#" class="siteButton" id="btnGetHtml">Get html</a>
</div>
</div>
</body>
</html>
- To use "
Cleditor", you will need to include the "jQuery" and "Cleditor" related JavaScript files and CSS styles in your web page. - You will need to put a "
textarea" HTML control in your web page. The "Cleditor" will use it as the placeholder to generate the rich-text editor.
When initiating the rich-text editor, you do not need to give any options. In this article, I gave it some very simple options to configure the editor to the way that I like. The three hyperlink controls are used as buttons in this example to demonstrate how to clear the editor, how to insert an image into the editor and how to obtain the HTML text created by the rich-text editor.
As simple as it is, we now have a fully functional rich-text editor. We can now test it to see how it works.
Run the Application
When the application starts, the editor is shown in the browser.
We can then type in some text and click on the "Add an image" button to add a picture.
If you click on the "Get html" button, a message box is shown to display the HTML text created by the rich-text editor.
Points of Interest
- This simple article presented a very simple example to use the "Cleditor" jQuery plugin for HTML rich text editing.
- The "
Cleditor" is not created by me. I just gave an example here on how to use it. Whoever created it, Great Job and appreciated! - The "
Cleditor" has some very comprehensive configuration options. In this example, I only showed you some very basic usages of the "Cleditor". If you want to use some advanced features, you can look into the JavaScript code of the plugin. - I hope you like my postings and I hope this article can help you one way or the other.
History
- First revision - 9/20/2011
