The built-in user interface includes:

Key and mouse handling
for selection and editing.
and keyboard shortcuts.
to edit hyperlinks and tables.
to copy and paste text.
Advanced user interaction
You can optionally extend the UI using .NET APIs:
  • Write event handlers for toolbar, key and mouse events.
  • Interact with the document, and the user's selection.
  • Use <form> and <input> controls to interact with the user.


Users are given a familiar, standard UI for a text editor:

  • Edit the document using toolbar commands (also available as shortcut keys).
  • Insert HTML elements: including paragraphs, headings, lists, and tables.
  • Selecting text, using the mouse and keyboard, is similar to using Microsoft Word.

Sample screenshot

The visual styles of elements is defined by your CSS, which you pass to the control.

The control just edits the structure of the document, not its style:

  • It doesn't create elements like <font>, which affect only the appearance.
  • It doesn't edit element attributes, for example the style= or class= attributes.

The output from the editor, the resulting document, is clean, semantic XHTML.

Keys and Mouse

You can use the keyboard to type text, the cursor keys to navigate within the page, the Delete and Backspace keys to delete text, the Enter key to start a new paragraph, and hotkeys as shortcuts for the various toolbar commands.

You can use the mouse in the usual ways (click, click-and-drag, and double-click), to set the location of the insertion cursor, and/or to select a range of existing text.

Toolbar Commands

While the control is being used as a WYSIWYM editor, it can display a toolbar. The various toolbar commands are as follows. You can also invoke these commands using the standard hotkeys, for example Ctrl+S for Save, etc.

Sample toolbar


This command notifies an event handler in your application: your application can then read the current HTML from the control, and save it somewhere.

Cut, Copy, and Paste

These commands interact with the system clipboard: for details, see Using the Clipboard, below.

Undo and Redo

Unlike some editors which are built using browsers, ModelText's HTML edit control has robust support for Undo and Redo. An end user action like a keypress may cause a change to the DOM. If your application has used the API to install an event handler, the event handler which is triggered by this action might make a further change to the DOM. In this case the two actions (the built-in action caused by the keypress, and the supplementary action invoked by the application) are both handled as part of the same editor transaction. A subsequent Undo request by the end user will undo both actions. The result is that any extra functionality which your application adds via event handlers seems to be seamlessly integrated with the basic editing functionality.

This command notifies an event handler in your application: your application can then display a dialog, for example to let the end user select the target of the hyperlink. For further details, see Hyperlinks, below.

Heading Level

This command lets you set the heading level of a paragraph, to "Body text" for a <p> element, or to "Heading 1" through "Heading 6" for <h1> through <h6> elements.


These commands let you specify that paragraphs are list items, of an ordered or an unordered list.


This command lets you insert a table. When you're editing a table, you can edit the text within the table cells, and/or you can edit the table itself, adding and/or removing rows and columns.

HTML contains hyperlinks, encoded using anchor (<a>) tags.

There are various things that a user might want to do with hyperlinks:

  • Create or edit it
  • Navigate to the target (either in a new window, or the existing window)
  • Something else, for example check whether the target of the hyperlink exists (without navigating to it).

These actions should be implemented by the application in which the edit control is embedded, because the action require access to external resources (e.g. to a collection of possible hyperlink targets).

An application uses the API which is exposed by the control, to detect when the user clicks on the Insert Hyperlink item of the toolbar, and/or to detect when the user clicks on an existing hyperlink within the text being edited. The application can then for example pop a dialog which shows the target of the hyperlink; and, if the user changes the target, make the corresponding change to the href="" attribute in the DOM.

Using the Clipboard

The edit control supports using the clipboard to cut, copy, and paste.

Text from within the document keeps its original formatting. So, for example, list items and table cells can be cut from one part of the document, and pasted in another part.

Text that's pasted from other applications is pasted as HTML paragraphs. The end user can then use the UI to apply further HTML formatting as necessary, for example to convert some pararaphs to headings or lists.

The .NET runtime environment restricts access to the clipboard, when the control is run in a partial-trust or untrusted environment. This is a feature of the .NET environment, to prevent untrusted applications from reading the user's clipboard. To enable clipboard access, you simply need to run the control with more permissions.

There's a separate utility, the Doc to HTML Converter, to convert Word documents to HTML. This utility is not integrated with the ModelText HTML edit control, but may be used by your users, or used by your application.

Read-Only Sections

The control has an API which lets the application specify that certain elements in the DOM are read-only. The end user cannot edit read-only elements, nor even position the insertion cursor inside them (clicking on a read-only element results in the entire element being selected).

Having read-only sections may be useful for certain applications, for example if you want a machine-generated navigation list of hyperlinks within the document, which the user can click on but not edit.

HTML Element Attributes

The WYSIWYM user interface doesn't support the user's seeing or editing the underlying HTML. The Toolbar Commands listed above can be used to implicitly create and edit HTML elements, but there's no UI to edit element attributes (including for example, the id and class attributes).

This encourages the end user to focus on creating content, instead of playing with the presentation. It also means that HTML documents and document fragments from the control are relatively "clean", and can for example be aggregated into other pages without conflict.

There are two scenarios however in which the HTML from the control may contain element attributes.

The Control Preserves Existing Attibutes

Instead of giving the end user an empty control and letting them create HTML from scratch, the application might prepopulate the control with an HTML document or fragment, and let the end user edit the existing HTML. In this case, if the HTML which the application originally inserted into the control contained attributes, then these attributes are preserved when the document is edited.

An example of how this feature can be useful is that the application might assign id attribute values to the original elements which it inserts into the control. After the user edits the document, the original elements can be identified by their preserved id attribute, whereas newly-inserted elements can be identified by the fact that they have no id attribute.

The API Can Edit Attributes

The application can use the .NET APIs to insert elements which contain attributes, or to edit the attributes of existing elements.

One reason for doing this is to edit an element's display or class attribute, to toggle the element's visibility.

Web Form Controls

The control can also be used as a web form, with web form controls like <input> and <textarea> inside a <form> element.

Sample form

If the HTML (which the application loads into the control) contains a <form> element, then the control behaves like a web form instead of like a WYSIWYM editor:

  • The HTML cannot be edited: there's no insertion cursor (except within any <textarea> or <input> elements).
  • The user interacts with the form controls (for example, selecting radio buttons, enabling check boxes, typing into text areas, and pressing a Submit button).
  • The application can read the values of the various controls, which the user has selected and/or entered on the form.

APIs to Extend the UI

The application can use the .NET APIs to extend the basic editing UI. Examples of a couple of things you can do include:

  • Use the Event API to watch for the user's pressing the Ctrl+B key combination, or entering Markdown text like **this**, and then using the DOM API to insert corresponding <strong> elements.
  • Use the DOM APIs to change the attributes of various elements: including the id="", class="", and style="" attributes.
  • Select or highlight specific words in the document.


The control supports many of the CSS Properties. This allows the application developer (not the user) to define the appearance of the text which is rendered in the control.

It also allows the application to alter the appearance of elements within the control, to interact with end users. For example you can insert colored text spans which contain messages for the user; and use the DOM APIs to alter elements' display="" or class="" attributes, to change elements' appearance at run time, or to make the elements visible or invisible.