HtmlEditor

• Download source code - 36.3 KB

Introduction

Despite the existence of many implementations of HTML editors, most of them resorted to references to the MSHTML library, non-managed code, or calls to the native system functions via P/Invoke.

This editor was created to eliminate this dependence, using only managed code and the implementation of the WebBrowser included in the .NET Framework.

Background

To overcome the lack of certain features (access to getCommandValue, selected text management, etc..), the editor calls JavaScript code to access the DOM structure of the document.

Using the code

Using the editor is very simple, because its interface is similar to the RichTextBox control; just include it in your form to access the functions and properties that it provides.

The code includes three events useful to develop a full text editor: ContentChanged (invoked when you change the edited HTML), UpdateUI (invoked when you should update the design buttons as bold or italic), and HotkeyPress (invoked when the user presses any key with Ctrl, Alt, or Shift, useful for setting your own hotkeys).

By default, the control works with UTF-8 text.

Shown below are the JavaScript functions that are used to perform the operations that are not included in the WebBrowser. Each time you edit a new document, they are added to the header of the document to be used during execution.

function getCommandValue(commandId){
    return document.queryCommandValue(commandId);
}
function getSelectionStart(){
    var range=document.selection.createRange().duplicate();
    var length=range.text.length;
    range.moveStart('character', -0x7FFFFFFF);//Move to the beginning
    return range.text.length-length;
}
function setSelection(start,length){
    var range=document.selection.createRange();
    range.collapse(true);
    range.moveStart('character', -0x7FFFFFFF);//Move to the beginning
    range.moveStart('character', start);
    range.moveEnd('character', length);
    range.select();
}
function setSelectedHtml(html){
    document.selection.createRange().pasteHTML(html);
}
function setSelectedText(text){
    document.selection.createRange().text=text;
}

var findRange;
function findString(text,settings){
    if (findRange!=null) 
        findRange.collapse(false);
    else
        findRange=document.body.createTextRange();

    var strFound=findRange.findText(text);
    if (strFound) findRange.select();
    else findRange=null;

   return strFound;
}

Points of Interest

The editor is still not complete; yet to implement an undo and redo system, more testing, and improving the functionality FindString().

History

• 6/2/2009
• First version.