Click here to Skip to main content
Click here to Skip to main content

An Example to Use HTML Rich Text Editor - Cleditor

By , 20 Sep 2011
Rate this:
Please Sign up or sign in to vote.

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:

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

About the Author

Dr. Song Li

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

 
QuestionNo need of horizontal at in Text area Pinmemberphanimaddineni.net15-Mar-14 10:09 
QuestionNice one PinmemberMember 87551929-Aug-13 5:14 
QuestionSupport Site PinmemberChris Landowski19-Jul-13 13:17 
AnswerRe: Support Site PinmemberDr. Song Li20-Jul-13 7:53 
GeneralNot able to set the value in the HTML editor PinmemberNaresh Eclerx27-Jun-13 0:54 
QuestionRetrieve the applied setting from the cleditor PinmemberMahashan30-Jan-13 19:32 
QuestionGreat one PinmemberSkvignesh24-Jan-13 1:09 
GeneralMy vote of 5 Pinmembereslipak27-Sep-11 15:34 
Generalnice PinmvpSacha Barber25-Sep-11 23:43 
GeneralMy vote of 5 PinmemberAnurag Gandhi22-Sep-11 3:17 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140421.2 | Last Updated 20 Sep 2011
Article Copyright 2011 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid