Custom RichTextEditor pasting control

From Visual WebGui Wiki

Jump to: navigation, search


Contents

Overview

This article demonstrates how a RichTextEditor can be customized, so that you can programatically paste text at the current location of the caret (cursor), replacing the selected text, if any.

This sample requires version 6.4.0 Release or later.

The application

The application itself is simple enough. Click anywhere within the RichTextEditor and then click the button, which will paste the current datetime at the caret's position. If you select a text within the RichTextEditor and then click the button, the pasted datetime with replace the text you selected.

Details

When wanting to paste text into an Html area, it should be simple enough just to run the "inserthtml" JavaScript command on the area and the text will be pasted. This holds true for most browsers, but not IE. In IE you don't have the "inserthtml" command, and will have to use ranges to get the job done. Furhtermore, when you click outside of the RichTextEditor area, IE looses information on current caret's position, so you have no way of knowing where the cursor is, or was, located.

The customization to the RichTextEditor in this sample is therefore almost all targeted at IE. The idea behind the customization is to attach an eventhandler for the "selectionchanged" event of the DOM element and when it fires (inside the resources), retrieve information about the current caret's position, as well as the size of the selected textarea, if there is a selection. After those information have been retrieved, an event is raised to the Visual WebGui application, notifying the server-side of the application of the current position and selection length.

From the Visual WebGui application's server-side code, you will then use this information as parameters to the pasting function to paste your text at the specified location, optionally replace the selected text, if any.

Requirements

  • This application works only on Visual WebGui v6.4.0 Release or later versions.

References

See also


Personal tools