Click here to Skip to main content
15,867,704 members
Articles / Web Development / HTML

An Example to Use HTML Rich Text Editor - Cleditor

Rate me:
Please Sign up or sign in to vote.
4.77/5 (16 votes)
20 Sep 2011CPOL2 min read 174.6K   9.5K   30   14
This simple article presents a very simple example to use the "Cleditor" jQuery plugin for HTML rich text editing.

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.

SolutionExplorer.jpg

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:

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

RunAppStart.jpg

We can then type in some text and click on the "Add an image" button to add a picture.

RunAppEdit.jpg

If you click on the "Get html" button, a message box is shown to display the HTML text created by the rich-text editor.

RichText.jpg

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

Comments and Discussions

 
Bug"Undo" and "Redo" buttons are disabled Pin
Member 95039474-Aug-14 16:07
Member 95039474-Aug-14 16:07 
GeneralRe: "Undo" and "Redo" buttons are disabled Pin
Member 95039474-Aug-14 16:45
Member 95039474-Aug-14 16:45 
GeneralRe: "Undo" and "Redo" buttons are disabled Pin
Dr. Song Li5-Aug-14 3:00
Dr. Song Li5-Aug-14 3:00 
QuestionThank you. Pin
Tejas Sawant 1325-Jun-14 21:28
professionalTejas Sawant 1325-Jun-14 21:28 
QuestionNo need of horizontal at in Text area Pin
phanimaddineni.net15-Mar-14 10:09
phanimaddineni.net15-Mar-14 10:09 
QuestionNice one Pin
Member 87551929-Aug-13 5:14
Member 87551929-Aug-13 5:14 
QuestionSupport Site Pin
Chris Landowski19-Jul-13 13:17
Chris Landowski19-Jul-13 13:17 
AnswerRe: Support Site Pin
Dr. Song Li20-Jul-13 7:53
Dr. Song Li20-Jul-13 7:53 
GeneralNot able to set the value in the HTML editor Pin
Naresh Eclerx27-Jun-13 0:54
Naresh Eclerx27-Jun-13 0:54 
QuestionRetrieve the applied setting from the cleditor Pin
Mahashan30-Jan-13 19:32
Mahashan30-Jan-13 19:32 
QuestionGreat one Pin
Skvignesh24-Jan-13 1:09
Skvignesh24-Jan-13 1:09 
GeneralMy vote of 5 Pin
eslipak27-Sep-11 15:34
professionaleslipak27-Sep-11 15:34 
Generalnice Pin
Sacha Barber25-Sep-11 23:43
Sacha Barber25-Sep-11 23:43 
GeneralMy vote of 5 Pin
Anurag Gandhi22-Sep-11 3:17
professionalAnurag Gandhi22-Sep-11 3:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.