Monday, July 30, 2012

Asp.Net Free Rich Text Editor using NicEdit Editor - Simple Interface

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 a simple Rich Text Editor interface.



To integrate the NicEdit editor, download the latest editor files from their site, it’s free!!!
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().panelInstance('txtSimpleText');
        });
    </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" >
<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().panelInstance('txtSimpleText');
        });
    </script>
</head>
<body>
    <form id="frmRichTextEditor" runat="server">
        <table>
            <tr valign="top">
                <td>
                   Simple RichText Box
                </td>
                <td>
                    <asp:TextBox
                        ID="txtSimpleText"
                        runat="server"
                        TextMode="MultiLine"
                        Height="100px"
                        Width="400px"></asp:TextBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>





Search Flipkart Products:
Flipkart.com

2 comments:

Unknown said...

Hi if i keep a dropdown and enable autopostback
during the valu change event, all the niceedit data is lost during autopost back even. But when I have button and on Button click, nice edit is having data.
Could you please let me know how to solve the same.


1
2
3
4

John smith said...

Congratulations! This is the best thing, Thank you so much for taking the time to share this exciting information.

Rich text editor JavaScript