jQuery Rich Text Editor

Tags:

Project Summary

A lightweight jQuery Rich Text Editor based off of Batiste Bieler's jQuery Lightweight Rich Text Editor.

Documentation

Usage

Here is a demo page:

                <link rel="Stylesheet" href="/lib/css/rte.css" />
                <script type="text/javascript" 
                src="/lib/js/jquery-1.3.1.min.js"></script>
                <script type="text/javascript" 
                src="/lib/js/jquery.rte.js"></script>
                    
                <script type="text/javascript">
                        
                function initRte() {
	                $(".rte-zone").rte({
		                cssUrl: "/lib/css/rte.css",
		                mediaUrl: "/lib/img/rte/",
		                listenToClass: "cmdBtn"
	                });
                }
                        
                $(initRte); // on DOM load
                </script>

                <form runat="server">

                <asp:TextBox id="myTextbox" cssclass="rte-zone" 
                textmode="multiline" runat="server" />

                </form>
            

Explanation

I include the rte.css and the jquery.rte.js file. The function to call RTE is:

$(element).rte(options);

There are 3 options available (all are optional):

cssUrl
The URL to a CSS class the control should use within the document body.
mediaUrl
The URL to the folder where the images are stored.
listenToClass
Refers to the CSS class you assign to the buttons/links that submit the form.

If any options are left out, they are assumed to be null (in other words, not a .NET page, and images/css are in the same directory).

To instantiate all instances of the RTE, you have to assign the TextBox a CssClass like so:

                <asp:TextBox id="myTextbox" 
                CssClass="rte-zone" 
                TextMode="MultiLine" runat="server" />

                or within a DataBinded Control (ListView, GridView, etc)

                <asp:TextBox id="myTextbox" 
                CssClass="rte-zone" 
                TextMode="MultiLine" 
                Text='<%# Bind("my_data_field") %>' 
                runat="server" />
            

Then to hook up the click events for the commands, you should assign a CssClass to the commands.

As an example, here is how to do it with a DetailsView control with the code above.

                <Fields>
                <!-- other fields BoundField, TemplateFields, etc. -->
                <asp:CommandField 
                ControlStyle-CssClass="cmdBtn" 
                ShowDeleteButton="True" 
                ShowEditButton="True" 
                ShowInsertButton="True" />
                </Fields>
            

That's all there is to it! It's up to you to extend it and style it as you please.

An error has occured while trying to process your request. Hide