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
|
