Post date: May 26, 2013 1:26:48 PM
Implementing RichText Editor in .Net using AJAX is quite simple and it uses AjaxControlToolkit.HTMLEditor assembly.
How to user RichText Editor
Create usercontrol editor.ascx and add following code
<div>
<cc1:Editor ID="Editor1" runat="server" Width="748px" Height="130px" />
<asp:Button ID="SaveButton" runat="server" Text="Save" Height="20px" OnClick="SaveButton_Click" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" Height="20px" OnClick="CancelButton_Click" />
<div style="clear:both"></div>
<asp:Literal runat="server" ID="litHeader" Visible="false" ></asp:Literal>
</div>
Do not forget to add register tag on top of the page
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>
We will also add a link button which will be visible to admin user and on clicking the link button it will allow user to display the rich text box in edit mode to adit the contents else the contents will be displayed normally.
<asp:LinkButton ID="EditContentLinkButton" runat="server" OnClick="EditContentLinkButton_Click" >Edit Content</asp:LinkButton>
In the code behind, check if the logged in user is admin or its a normal user. You can also check if the logged in user has permission to change the page contents. If so, let the Edit Content link button be visible and your contents will be displayed normally in your web page.
bool isallowed = objEdit.CheckUserEditPermission(UserId, pageid);
if (isallowed)
EditContentLinkButton.Visible = true;
else
EditContentLinkButton.Visible = false;
In EditContentLinkButton_Click reload the page with rich text editor in edit mode and make Save/Cancel buttons visible
Editor1.Content = str_HeaderContent;
litHeader.Visible = false;
Editor1.Visible = true;
SaveButton.Visible = true;
CancelButton.Visible = true;
In the SaveButton_Click click event save the editor contents in database. Make sure your datatype in database is nvarchar and accepts large amount of data
Once the contents are saved in DB, reload the page to display in view mode.
You can also implement Preview and Draft Mode instead of directly saving the contents in database.
Make sure you use HTMLEndode function while saving the data in database since your richtext data will be saved as html in the database.
You can either create the rich text editor directly on a aspx page or within user control. I have used rich text editor as a tool for content management which allow admin to edit the web page contents and instead of using the editor on each page separately I have create usercontrol to manage the view/edit for each page.