HtmlEditor

• 下载源代码 - 36.3 KB

引言

尽管存在许多 HTML 编辑器的实现，但大多数都依赖于对 MSHTML 库的引用、非托管代码或通过 P/Invoke 调用本机系统函数。

该编辑器旨在消除这种依赖，仅使用托管代码和 .NET Framework 中包含的 WebBrowser 实现。

背景

为了克服某些功能（访问 getCommandValue、选定文本管理等）的不足，编辑器调用 JavaScript 代码来访问文档的 DOM 结构。

使用代码

使用该编辑器非常简单，因为它与 RichTextBox 控件的界面类似；只需将其包含在您的窗体中即可访问它提供的函数和属性。

该代码包含三个事件，对于开发完整的文本编辑器非常有用：ContentChanged（在编辑的 HTML 更改时调用）、UpdateUI（在应更新设计按钮（如粗体或斜体）时调用）和 HotkeyPress（在用户按下带有 Ctrl、Alt 或 Shift 的任何键时调用，用于设置您自己的热键）。

默认情况下，该控件使用 UTF-8 文本工作。

下面显示了用于执行 WebBrowser 中未包含的操作的 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;
}

关注点

该编辑器尚未完成；仍需实现撤销和重做系统，进行更多测试，并改进 FindString() 功能。

历史

• 6/2/2009
• First version.