In addition to being a WYSIWYG editor, the ASPxHTMLEditor control supports HTML input. You don't have to choose which input method to use, because the control provides automatic two-way synchronization between the visual editor and HTML code. End-users can switch to the code view and edit documents by manually controlling every tag and attribute. This allows them to use even those tags that aren't currently supported by the visual editor. At any time, they can switch back and forth to use the view that best suits their current editing requirements. Once editing has been completed, you instantly obtain HTML code to be published online.

To ensure superior performance, the editor initially generates the least amount of code required for its functionality on the client. When end-users need additional elements, such as popup windows for image or hyperlink management, these elements are loaded via AJAX callbacks. Callbacks are also used by default for all other actions that require communication with the server.

ASPx HTMLEditor - User Interface

Toolbars with Responsive Buttons

Two built-in Microsoft® Office® style toolbars provide easy access to all available functions. Just like Office, toolbar buttons and integrated editors automatically update their state or content, depending upon the currently selected text block. This works for all items – from the font name editor to buttons specifying text and background color.

The toolbars in the ASPxHTMLEditor were built using the DevExpress ASPxMenu control.

Custom Toolbars and Client-Side API

If needed, you can customize the editor's UI by hiding standard toolbars and adding any number of toolbars that include existing or custom commands. When implementing custom commands, you can make use of our client-side API, which allows you to invoke any sequence of built-in commands like deleting text, applying font formatting, etc.

HTML View

If you need access to the generated HTML code, or if it's easier to do something in code, you can switch to the HTML view, and edit markup that represents the current content. When you switch back and forth, server-side validation and synchronization are invoked. These operations are done via AJAX callbacks to guarantee the highest level of responsiveness.

Note that HTML editing allows you to embed elements that currently can't be managed via the visual editor's built-in commands. And if you have text within those unsupported elements, you will still be able to customize its formatting via the editor's toolbars when in design view.

Built-in Context Menus

When you right-click an object, the ASPxHTMLEditor overrides the default browser menu and displays its own menu making editing commands easily available. Depending on the clicked object, you get slightly different command sets. For instance, if you've right-clicked an image, you can invoke the image customization dialog directly from the context menu.

ASPxHTML Editor - Editing Features

Text and Paragraph Formatting

As one might expect, our editor fully supports all basic text and paragraph formatting features, as shown in the following image.

Embedded Images

To embed images, simply click a toolbar button. This will invoke a modal popup dialog that provides two options for getting an image. One way is to upload an image from your hard drive to a special folder on the web site. Another is to simply refer to an image by URL. Whichever method you choose, the dialog allows you to specify custom image size, alignment and hint text. After an image has been added, the design view allows you to resize and re-locate the image using simple drag and drop operations.

The image customization dialog is invoked via an AJAX callback. This means that less HTML code is initially downloaded to the client.

Hyperlinks

The functionality related to hyperlinks is pretty much the same as with embedded images. There are two built-in toolbar buttons allowing you to link or unlink a selected text fragment. You get an AJAX-enabled popup dialog that specifies the target URL and other link-related attributes. Finally, when you right-click a link in design view, there's a special context menu item making link cusotmization more straightforward.

Multi-level Undo and Redo Operations

The ASPxHTMLEditor keeps track of all operations, allowing you to rollback to an earlier version or to repeat the same customizations. You can either use toolbar buttons or standard keyboard shortcuts - CTRL+Z and CTRL+Y - as you would do in Microsoft Word or any other text editor.

Security Assurance

The ASPxHTMLEditor accepts HTML code, which is a way to initiate web server attacks. One very obvious method used in malicious attacks is to run a script by inserting it into an image's Load event handler. To prevent this, our editor implements smart script validation that removes scripts, if assigned. (If you don't mind scripts, there's an option to turn off this script removal mechanism.)

Another potential source of harm is having links to images on other web sites. To avoid such links, our image insertion dialog allows you to download an image to the web site's upload folder. This way, you'll use a local copy rather than referring to an external resource.

ASPxHTML Editor - Printing and Data Exchange

Pasting from Microsoft Word

As we all know, the HTML output produced by Microsoft Word is pretty lengthy. It contains lots of attributes that aren't really required to produce the same document view. When you needed to copy text from Microsoft Word to the ASPxHTML Editor, all those unnecessary attributes were copied.

With this release, our HTML Editor control allows you to automatically eliminate these extra attributes and obtain cleaner and more compact HTML code.

Print HTML Editor Content

Printing the contents of the ASPxHTML Editor is now a piece of cake – just a single click for your end users.