How to Create an HTML Editor for ASP.NET AJAX

Introduction

Most blog, forum, and Wiki applications use an HTML editor as the primary authoring tool for site content. With this type of a control, an online user can create and edit an HTML document. The user is able to modify the text — including its format, fonts, and colors — as well as add links and images. Often, the user can also view and/or edit the HTML source.

Microsoft AJAX (ASP.NET AJAX Extensions) introduces a new implementation model for server controls with related scripts. This article discusses how to create an HTML editor server control specifically for the Microsoft AJAX environment. The reader can also download the source code, including a sample web page, and view an online demo.

Background

DesignMode

Most modern browsers now support the "editing" of displayed HTML content by the user. When the document designMode property is set to true, the rendered HTML on the page can be edited by the user. While in designMode, the document's execCommand method supports additional commands that enable "programmatic" modification of document content. For example, passing the command string bold as the first parameter to execCommand causes the selected text to appear bold by adding appropriate HTML tags and/or attributes.

The resources listed at the end of this article discuss designMode and execCommand in more detail, and describe how to implement a basic HTML editor. Also, the source code available with this article can be examined for implementation examples.

Microsoft AJAX Model for Server Controls with Related Scripts

As part of ASP.NET AJAX, Microsoft introduced a new "model" for extending the capabilities of a server control with client-side script. That model is described in an ASP.NET AJAX tutorial that should be read along with this article. In general, we create two related controls:

  • A server control that implements the IScriptControl interface
  • A related client control derived from Sys.UI.Control (part of the client-side AJAX library)

In order for ScriptManager to know how to create and initialize the related client control, we implement the new IScriptControl interface, adding two callback methods. Then, we add a few lines of code to OnPreRender and Render to trigger those callbacks at appropriate times in the page life cycle. The specifics are described in the tutorial, and again in the discussion of HtmlEditor.cs below.

We also encapsulate our client-side behavior in a JavaScript class, implemented as a Microsoft AJAX client control. This permits the client control object to be created and initialized in a standard way by the client-side AJAX code. The specifics are described in the tutorial, and again in the discussion of HtmlEditor.js below.

Source Code

Click the appropriate link to download the source code, including a sample web page.

System Requirements

  • ASP.NET 2.0 or higher
  • ASP.NET AJAX

Component Parts

  • HtmlEditor.cs (the C# file for our server control)
  • HtmlEditor.js (the JavaScript file for our client control)
  • Images/*.gif (image files for our toolbar images)

UI Elements

Component appearance:

  • Two toolbar rows across the top
  • Two tabs along the bottom
  • An editor area that displays and/or edits the document in either mode

Screenshot - HtmlEditor.jpg

Click here for an online demo.


See full detail: http://www.codeproject.com/KB/ajax/HtmlEditor.aspx

Comments

Post a Comment

Popular posts from this blog

Very fast test data generation using exponential INSERT

Image
Introduction This article (my first) will describe an algorithm that enables a large amount of data to be generated very quickly using a SQL query. The test data can be static or incremental, such as “Item Name” and “Item ID”, respectively, as shown below: Background One of the tasks I did in a project involves generating a testing table with 103,680,000 records. The conventional method of data generation would take a month; hence, a fast method of data insertion was required. The new method took only 5 hours. Using the code Conventional method – Sequential INSERT The conventional way of generating a list of numbers from 0…100000 would be using a loop and an INSERT statement as follows: CREATE TABLE #tempTable([Item ID] [ bigint ], [Item Name] nvarchar ( 30 )) DECLARE @counter int SET @counter = 1 WHILE (@counter 100000 ) BEGIN INSERT INTO #tempTable VALUES (@counter, ' Hammer' ) SET @counter = @counter + 1 END SELECT * FROM #tem...
Read more

Basic concept and fundamentals of ASP.NET MVC (Model View Controller) Architecture

Image
This is basic concepts and fundamentals of ASP.NET Model View Controller (MVC) architecture workflow. MVC is stands for MODEL VIEW CONTROLLER. ASP.NET MVC is an architecture to develop ASP.NET web applications in a different manner than the traditional ASP.NET web development. Web applications developed with ASP.NET MVC are even more SEO (Search Engine) friendly. Microsoft .Net Framework 3.5 is minimum requirement to develop ASP.net MVC application.   MVC (Model View Controller) Interaction with Browser Like a normal web server interaction, MVC application also accepts requests and responds to the web browser in the same way.   Inside MVC Architecture The entire ASP.NET MVC architecture is based on Microsoft .NET Framework 3.5 and in addition uses LINQ to SQL Server. What is a Model? MVC   model   is basically a C# or VB.NET class A   model   is accessible by both   controller   and   view A   model   can be used to pass data ...
Read more

MVC Architecture Model In ASP.NET

Image
When developing ASP.NET applications the need of reducing code duplication increases along with their complexity. This is because testing and performing changes become very difficult tasks when having many different sources of code with the same functionality. Model View Controller architecture (or pattern) allows us to separate different parts of our applications into tiers to fulfill this need. MVC Overview Model View Controller architecture aims to separate an application into three parts: Model:  It is the business logic of an application. From an object oriented perspective it would consist of a set of classes that implement the critical functionality of an application from a business point of view. View:  It can consist of every type of interface given to the user. In ASP.NET the view is the set of web pages presented by a web application. Controller:  This part of the architecture is the most difficult to explain, hence the most difficult to implement in ...
Read more