When you discover a cool new server control you will immediately start thinking of where and how you can make use of it. RichTextBox has lots of useful example code to get started from scratch, but how easy is it to put to use to enhance your existing code? In this article I attempt to put it to use in my IBuySpy Portal and ASP.NET Forums projects.
First I want to try it out with my personal web site, http://www.chrisg.com/ - the project closest to my heart and also the place I could really do with web-based HTML editing.
My site is a customised version of the IBuySpy portal. This example code allows some content management, but requires HTML to be hand coded. Not that much of a pain, but a perfect place to try out RichTextBox.
IBuySpy Portal
I am glad to say, 5 minutes after looking at the code I had it up and working. The process is simply a case of
- Open your Visual Studio project and copy the RichTextBox.dll and XML file to your project Bin directory with "add existing item(s)"
- Add the the control to your toolbox (right click, customise)
- swap the existing TextBox in /DesktopModules/EditHtml.aspx with a RichTextBox. (Remember to set the id of the control as "DesktopText"
- Enter your license key
- Compile and upload the .aspx and /bin files
- Test!
ASP.NET Forums
With the ASP.NET forums, the user interface is mostly handled by the files in the Skins folder. The user control file that looks after the entering, preview and editing of users forums posts is "Skin-Post.ascx".
The process to switch this text box ("PostBody") over to use a RichTextBox is very much the same. A couple more modifications to the code do however need to be made.
If you compile and run the project and test, you will receive an error saying that we are trying to cast our RichTextBox as a plain ol' TextBox. The offending code is found in Engine/Controls/CreateEditPost.cs where there are several places with statements like the below which is for the "post editing" routine.
// Set the Body
textbox = (TextBox) controlTemplate.FindControl("PostBody");
textbox.Text = post.Body;
We need to change this so it is like the following:
// Set the Body
RichTextBox richtextbox;
richtextbox = (RichTextBox) controlTemplate.FindControl("PostBody");
richtextbox.Text = post.Body;
This will swap the code to refer to a RichTextBox instance instead of a TextBox.
Post and Preview routines will also need to be altered In "PostButton_Click" change to the following
RichTextBox richtextbox = (RichTextBox)(form.FindControl("PostBody"));
postToAdd.Body = richtextbox.Text;
Then find the code where it says "// Preview the post body" and alter the code to reflect the following.
label = (Label) form.FindControl("PreviewBody");
RichTextBox richtextbox = (RichTextBox)(form.FindControl("PostBody"));
label.Text = Globals.FormatPostBody(richtextbox.Text) + Globals.FormatSignature(user.Signature);
You can download my copy of the file with the following link.
www.aspalliance.com/chrisg/tools/download.asp?file=createeditpost.cs
Conclusion
So how easy was it in the end?
I guess the answer is .. pretty easy! It is certainly encouraging to see how simple it can be to add a vanilla RichTextBox to existing projects. This is mainly due to the fact that most of the normal operations involve reading and writing the .Text property which both controls support.
In this article I haven't done any customisation other than replacing the plain text input box with a shiny new RichTextBox. Obviously once your users get over the pleasant suprise of HTML editing I am sure they will demand more functionality. This may be where the real challenge arises!
<a onmouseover="window.status='http://www.richtextbox.com/';return true;" onmouseout="window.status="'" ';return true;" href="http://store.esellerate.net/s.asp?s=STR969980788&AffIDC=AFL069166120">http://www.RichTextBox.com