Friday, September 23, 2011

Adding Attachment Toolbar button to HTML Editor

Requirement
Recently, I was working on a project (ASP.NET) where there was a need to allow business users to design their own html page with some basic html features. In addition they also wanted to add some logo and attachments to their html.


Possible Solution
- Somebody suggested to use sharepoint features, which has lots in inbuilt functionality to manage contents. I did not take this approach because of sharepoint environment management point of view. Its a whole different world to manage. I wanted to keep my solution simple
- Another approach was to bye some html editor product which gives all functionality you need. We did not want to spend money to buy any product on this
- Use AjaxControlToolkit HtmlEditor which gives all basic features and enhance it to add new toolbar button to add attachments and logo. This is the approach we went for.

Solution
Solution basically uses-
1) .NET 4 framework
2) AjaxControlToolkit HtmlEditor
3)  AjaxControlToolkit AsyncFileUpload control
4) jquery ui plug in

The basic design involves of
  • Creating a class for your new htmleditor called (MyHtmlEditor.cs) and extend it from ajaxcontroltoolkit htmleditor class.
  • Override its FillToolBar method to add your new toolbar button
  • Create a new class for your new tool bar button and extend it from MethodButton
  • Override few methods and properties
  • Use embedded resource for toolbar icon, client scipts, so that you can reuse your library anywhere you want
  • You can implement your upload complete event in the way you want, you can save it to database or local server.

You can download the code from the following location

Code to Download