We can convert an Asp.Net Area (TextBox with TextMode="MultiLine") into a Rich Text Editor with advanced features by integrating it with the NicEdit editor.
NicEdit is a FREE Javascript Based WYSIWYG Editor, it provides many simple advanced and custom modes to apply rich text editor effect, here we shall see on how to integrate an advanced Rich Text Editor interface.
This advanced interface will display all options, hence has more features than the simple interface.
To
integrate the NicEdit editor, download the latest editor files from their site,
it’s free!!!
http://nicedit.com/download.php
http://nicedit.com/download.php
Once downloaded, extract the files and place them in a subfolder under your main Asp.Net project path.
Open the Asp.Net page and add a reference to the Editor file as follows.
<script type="text/javascript" src= "JavaScript/nicEdit/nicEdit.js"></script>
Now add initializing code to integrate the TextBox with the Editor as follows.
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new
nicEditor({
fullPanel: true
}).panelInstance('txtAdvansedTextArea');
});
fullPanel: true
}).panelInstance('txtAdvansedTextArea');
});
</script>
Build and run the application, you can see
that your TextBox is displayed as a Rich Text editor after integrating it with
the NicEdit Editor.
Here is the Full Example.
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Rich
Text Editor (NicEdit)</title>
<script type="text/javascript" src= "JavaScript/nicEdit/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new
nicEditor({
fullPanel: true
}).panelInstance('txtAdvansedTextArea');
});
fullPanel: true
}).panelInstance('txtAdvansedTextArea');
});
</script>
</head>
<body>
<form id="frmRichTextEditor" runat="server">
<table>
<tr valign="top">
<td>
Advanced RichText Box
</td>
</td>
<td>
<asp:TextBox
ID="txtAdvansedTextArea"
runat="server"
TextMode="MultiLine"
Height="100px"
Width="400px"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment