Sample Code & QuickStart: How
to use the RTE in your site
RTE quick start
1. Within the downloaded zip file you will find a bin and RTE_Resources
directories. From the bin directory remove the RichTextEditor.dll file and add
this to the bin directory of your project. Also add the RTE_Resources directory
to your project.
2. Add the following directive at the top of the page you want the RTE to
appear in
<%@ Register TagPrefix="ExportTechnologies" Namespace=
"ExportTechnologies.WebControls.RTE" Assembly=
"ExportTechnologies.WebControls.RTE" %>
3. Add the following line to the place in the page where you want the
RichTextEditor to appear
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
runat="server"/>
Working with the RTE's properties
The RTE has 32 properties which can be set during design time.
To set the width and height of the control, add the following attributes to the
RTE tag:
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
height="450px" width="200px" runat="server"/>
The RTE can also add a drop down list of CSS classes within a style sheet to
its interface. To do this you must set the StyleSheetUrl to point to a
CSS style sheet within your project. The tilde symbol (~) refers always to the
root directory of the application. If you do use the above property, ensure
that the stylesheet is available to the html page which contains the RTE, by
adding a link to the styleheet between the pages <head/> tags.
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
StyleSheetUrl="~/Style/style.css" runat="server"/>
The text direction of the RTE can be reversed with the TextOrientation
attribute. This takes two values: RTL (Right-To-Left) and LTR (Left-To-Right)
which is the default value.
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
TextOrientation="RTL" runat="server"/>
The RTE's appearance can be customized by means of the EditorStyle attribute.
There are three options available:
standard is the default. The appearance is changed as follows:
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
EditorStyle="khaki" runat="server"/>
The RTE can be 'turned off' to user input through the ReadOnly property.
Setting it to true will disable users from entering/editing html.
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
ReadOnly="true" runat="server"/>
All the RTE's features can now be hidden via properties. The following image
shows the middle toolbar has been hidden:
The code example below will turn off the middle toolbar:
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
HideToolBar2="true" runat="server"/>
The RTE can now be used to edit/view the source of a web page. To do this, you
must set the property HideWebPage to false, as it is turned off by
default. This will add an input box and button to the middle toolbar. Enter the
url of the web page whose code you want to view in the text box, and press the
button. In the image below, 'http://yahoo.com' has been entered, and the site
has appeared in the editor.
Please note that some sites may not show properly within the editor. Also it is
highly recommended that this feature is used as an admin feature, and not open
to all users to use.
The title of the HtmlMode view can now be set and styled via the HtmlModeTitle
and the HtmlModeTitleCssClass.
<ExportTechnologies:RichTextEditor ID="RichTextEditor1"
HtmlModeTitleCssClass="title1" runat="server"/>
The output of the RTE can be set/retrieved using the Text property. To
the page containing the RTE, drop in an <asp:label/> and an
<asp:button/>. Add a reference to the RTE assembly by:
-
In Visual Studio's Solution Explorer, right click 'References' and select 'Add
Reference..'
-
In the '.Net' tab, click the 'Browse..' button and locate the
ExportTechnologies.WebControls.RTE.dll file
-
Click 'OK' the reference to the assembly to your project
In the code behind for the button add the following:
C#
Add an using directive:
using ExportTechnologies.WebControls.RTE;
Declare the name of the RTE object:
protected ExportTechnologies.WebControls.RTE.RichTextEditor
RichTextEditor1;
Code the onclick button event:
private void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = RichTextEditor1.Text;
}
VB.NET
Add an import directive:
imports ExportTechnologies.WebControls.RTE
Declare the name of the RTE object:
Protected RichTextEditor1 as
ExportTechnologies.WebControls.RTE.RichTextEditor
Code the onclick button event:
Private Sub Button1_Click(ByVal sender As Object, ByVal e As
System.EventArgs)
Label1.Text = RichTextEditor1.Text
End Sub
|
