Click here to Skip to main content
Click here to Skip to main content

HtmlEditor

, 14 Jun 2012
Rate this:
Please Sign up or sign in to vote.
A one-class, non-MSHTML, full WYSIWYG HTML editor.

HtmlEditor

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Fco. Javier Marin
CEO
Spain Spain
I'm a young entrepreneur from Cartagena (Spain). I'm the creator and owner of some popular websites like Chuletas and Wikiteka.
 
Currently, I'm working on Ideatic, a company for Internet and software develop.

Comments and Discussions

 
Generalgood! thank you Pinmembervaooya11-Oct-13 20:54 
GeneralThanks for the... PinmemberGriavram19-Jun-12 1:05 
NewsThere is A LOT of great stuff hidden in the source code PinmemberDelphiCoder13-Jun-12 3:46 
GeneralRe: There is A LOT of great stuff hidden in the source code PinmemberFco. Javier Marin13-Jun-12 22:21 
Generalgood article PinmemberDonsw14-Jun-09 12:01 
QuestionNo MSHTML? Pinmembercaiafaverde8-Jun-09 20:27 
AnswerRe: No MSHTML? PinmemberFco. Javier Marin8-Jun-09 23:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 14 Jun 2012
Article Copyright 2009 by Fco. Javier Marin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid