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.4.2.min.js"></script>
<script type="text/javascript" 
src="/lib/js/jquery.rte.js"></script>
    
<script type="text/javascript">
        
function initRte() {
 $(".rte-zone").rte({
  content_css_url: "/lib/css/rte.css",
  media_url: "/lib/img/rte/",
  dot_net_button_class: "cmdBtn"
 });
}
        
$(initRte); // on DOM load
</script>

<form runat="server">

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

<asp:Button id="btnSubmit" cssclass="cmdBtn" 
Text="Submit" 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):

content_css_url
The URL to a CSS class the control should use within the document body.
media_url
The URL to the folder where the images are stored.
dot_net_button_class
Refers to the CSS class you assign to the buttons/links that submit the form (.NET only).
max_height
The maximum height of the generated iFrame.

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 databound 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