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.