New features in the version 4.0

The new version is highly optimized for Windows Vista 64 bit platform. Loads faster than before. It comes with the following features.

SpellChecker

Selection State Composite Property

Operations Composite Property

Searching API

Switching between design mode and HTML mode

New Methods

Events

Improvements

The Spell Checker

Selection State Composite Property

SelectionState at a glance

• It contains one of the important properties ActiveHTMLElement of type IHTMLElement . This property gives you full programming control for getting the Active Element as Document Object Model and manipulating the Element (as a node).
   
• SelectionState has got many other important properties. For example To determine the state of current selection it has properties like, IsBold, IsHyperLinkSelected, IsImageSelected, IsItalic etc.
  
  
• It has also properties to determine the status of important commands like Cut, Copy, Paste, Delete, Redo and Undo.
  
  
• Also some important functions like public void QueryCommandEnabled(string command) to determine the status of a certain command given.

Modifying HTML Element.

The following example demonstrates the usage of ActiveHtmlElement property. You may want that, if a button is clicked, the selected textbox within the editor must be updated with current date time value.

- Select the Input TextBox in the editor and click a button whose click event handler got the following method.

You can find details here .

Operations Composite Property

This HTML editor includes Operations Property. This composite property contains Methods associated with the toolbar items.

That is, if you want to create a button of your own and give it the default copy functionality, you can write code as follows

htmlEditor1.Operations.Copy();

You can find details here .

Searching Feature

You can also build the Search dialog by yourself. The required method overload for doing so is,

public bool Search(string text,bool matchWholeWord,bool matchCase)

For example let we have an Input Dialogue Form InputBox. We can write the code as following,

Switching between design mode and HTML mode

New Methods

Get and set caret position in points

In this new version you can get or set the current caret position.

For example, here we set the current caret position to x=40, y=15.

You can also get the current caret position in points.

Getting and setting current Scroll Position.

You can get or set the the current scroll position

 Here we set the position to x=100, y=10;

Getting nicely structured Plain Text right from your editor.

Many times, you may need the plain text version of the Html content preserving the orignal layout, like tables, line breaks, paragraphs etc. Simply the BodyText wont give you this layout preserved plain text string. So, now, the control includes a new method to get the well structured and formatted plain text equivalent string of the editor's body html. It is :

public string GetPlainText()

It may be useful when you want to get a plain text version of the Resume or Email Message you edited from the editor.

For example, if you have the following HTML shown in the editor,

Here is the output.

New Events

• New Button Clicked Event
• Open Button Clicked Event
• Save Button Clicked Event
• Pasting Event

Button Clicked events

This new version will give you total freedom on the way you would like to deal with the Open, New and Save button clicked events. For example you may want to retrieve the html from a database instead of showing an Open File Dialog. or you may want to store the HTML data to a database instead of saving to a file..etc

The new Pasting event

Now, you got more control on the pasting content. For example, you may want to remove unnecessary tags from the pasting html content if the content was copied from MS Word document. The following code snippet shows the usage:

New Improvements

Addition of new <span> tag instead of older <font> tag

From this version older <font> tags will be replaced by <span> tags. So your document will be more up-to-dated. Also, font size can be specified by pixel rather than old 1-7.

Fixing the image or other html element resizing problem

Image resize problem is fixed. Before, an user needed to click twice to resize an image or any other html element, but now, any html element can be edited, resized directly.

Customizing the toolbar

In this new version you have greater flexibility in customizing the toolbar items. You can Add, Hide, Edit, Move position of any toolbar items easily. And you can also add your own toolbars. You can find details in here and here. Also, previous versions got a bug about positioning the user added toolbar items. That bug is also fixed.

Customizing the context menu

You wont need to write code for using your own context menu anymore. Now you can add a context menu from the designer. For details about customizing the context menu please visit this page.

Support for the Relative URLs

Now, you can keep the relative urls of image, hyperlink or any other element that use relative urls. A new property is introduced named "BaseUrl". By setting this property, the image will be shown in the editor using relative url. Please visit this page  for details.

Convert File Http Url to Windows Path

This new version can converts the file paths from http format to windows like path format by settings the property ConvertFileUrlToPath. Systems with Internet Explorer version 6 and older are not compatible with special characters like Umlaut. So, if you face problem displaying images where the image src path contains umlaut, then you should not set this property. For example, setting the property to true, you will get a resource path as follows:

C:\my images\image1.jpg

But, if you set this property to false you will get the path as follows:

file:///C:/my%20images/image1.jpg

Image Link

 Now, this control will support editing or creating new Image Link. If you insert an image and if you want that image to be used as a hyperlink, you can easily do that now. Once you insert the image, select that image and click the Hyperlink button, the hyperlink dialog will popup. So, you can set Hyperlink properties. Once you do that and next time when you select the image again, both the Hyperlink and Image toolbar item will be checked. That means, clicking the image toolbar item will allow you to edit Image relatd properties and clicking the Hyperlink toolbar item will allow you to edit the hyperlink related properties.