Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / Windows Forms

HtmlEditor

Rate me:
Please Sign up or sign in to vote.
4.27/5 (14 votes)
14 Jun 2012CPOL1 min read 69K   2.8K   73   8
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.

JavaScript
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)


Written By
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

 
QuestionThanks for this excellent resource - and I have a question Pin
bobishkindaguy1-Mar-17 13:31
bobishkindaguy1-Mar-17 13:31 
Generalgood! thank you Pin
vaooya11-Oct-13 20:54
vaooya11-Oct-13 20:54 
GeneralThanks for the... Pin
Griavram19-Jun-12 1:05
Griavram19-Jun-12 1:05 
NewsThere is A LOT of great stuff hidden in the source code Pin
DelphiCoder13-Jun-12 3:46
DelphiCoder13-Jun-12 3:46 
GeneralRe: There is A LOT of great stuff hidden in the source code Pin
Fco. Javier Marin13-Jun-12 22:21
Fco. Javier Marin13-Jun-12 22:21 
Generalgood article Pin
Donsw14-Jun-09 12:01
Donsw14-Jun-09 12:01 
QuestionNo MSHTML? Pin
caiafaverde8-Jun-09 20:27
caiafaverde8-Jun-09 20:27 
AnswerRe: No MSHTML? Pin
Fco. Javier Marin8-Jun-09 23:10
Fco. Javier Marin8-Jun-09 23:10 

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

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