C# WPF WYSIWYG HTML 编辑器

• 下载源代码 - 199.4 KB

引言

在本技巧中，您将学习使用 WPF webbrowser 控件以及使用 mhtml 库进行编辑。 这个简单的例子还将帮助您了解工具栏在 WPF 中的工作方式。

背景

在开发 WPF 应用程序时，我需要编辑 HTML 文档。 在对 WPF 中已经存在的解决方案进行了广泛的研究，但没有找到我想要的，我最终决定编写自己的 HTML 编辑器。
在分析了 Winform 解决方案之后，我发现 Microsoft 在 WPF Webbrowser 中做了重大更改。
始终可以使用 WPF WindowsFormsHost，但是您会失去 WPF 的优势。
在 WPF 版本的 webbrowser 中，不再有 IsWebBrowserContextMenuEnabled, ActiveXInstance。
所有权文档也发生了变化，Winform 版本包含一个 System.Windows.Forms.HtmlDocument 类型的文档，其中包含许多有趣的方法，例如 PointToClient 和 GetElementFromPoint。
在 WPF webrowser 中，文档是一个 document 对象，您需要将其转换为 mshtml.HtmlDocument 类型。
mshtml 库是一个非常强大的库，它为编辑和分析 HTML 文档提供了极大的可能性。
官方文档非常丰富。
https://msdn.microsoft.com/zh-cn/library/aa753630%28v=vs.85%29.aspx

WPF 界面

WPF 技术的好处有很多，并且具有创建许多高级界面的潜力。
未来的文章将专门介绍 WPF 中的 Ribbon 工具栏。

编辑 HTML

要使用 Microsoft.mshtml 库编辑文档，需要在项目中引用它。

using mshtml;

public void newDocument()
{
    webBrowser.NavigateToString(Properties.Resources.New);
    doc = webBrowser.Document as HTMLDocument;
    doc.designMode = "On";
}

格式化 HTML

要更改选区的标题，有几种方法可以进行。
此方法使用 FormatBlock webbrowser 控件。

public static void RibbonComboboxFormat(ComboBox RibbonComboboxFormat)
{
    string ID = ((Items)(RibbonComboboxFormat.SelectedItem)).Value;

    webBrowser.doc = webBrowser.webBrowser.Document as HTMLDocument;
    if (webBrowser.doc != null)
    {
        webBrowser.doc.execCommand("FormatBlock", false, ID);
    }
}

另一种解决方案是使用 mshtml 库。

mshtml.IHTMLDocument2 doc;

doc = webBrowser1.Document.DomDocument as mshtml.IHTMLDocument2;

mshtml.IHTMLTxtRange r = doc.selection.createRange() as mshtml.IHTMLTxtRange;
mshtml.IHTMLElement parent = r.parentElement();
mshtml.IHTMLElement heading = doc.createElement("<h2>");

r.pasteHTML(heading.outerHTML);

使用 Appendchild webbrowser 方法，您可以添加表格或任何其他 HTML 等元素。

HtmlElement tableElem = webBrowser1.Document.CreateElement("TABLE");
webBrowser1.Document.Body.AppendChild(tableElem);

要格式化文本，您可以通过多种不同的方式进行，可以使用 webbrowser 或 mshtml 库。
在本例中，我选择使用 webbrowser 中的命令。

public static void InsertOrderedList(HTMLDocument doc)
{
    if (doc != null)
    {
        doc.execCommand("InsertOrderedList", false, null);
    }
}

WPF 中的颜色对话框

Winform 的对话框与 WPF 不兼容。
WPF 使用 System.Windows.Media.Color 和 System.Windows.Media.Brush，而 Winform 使用 System.Drawing.Color。
解决方法是从四个通道分别进行颜色转换。

public static System.Windows.Media.Color Pick()
{
    System.Windows.Media.Color col = new System.Windows.Media.Color();

    using (System.Windows.Forms.ColorDialog colorDialog = new System.Windows.Forms.ColorDialog())
    {
        colorDialog.AllowFullOpen = true;
        colorDialog.FullOpen = true;
        System.Windows.Forms.DialogResult result = colorDialog.ShowDialog();

        if (result == System.Windows.Forms.DialogResult.OK)
        {
            col.A = colorDialog.Color.A;
            col.B = colorDialog.Color.B;
            col.G = colorDialog.Color.G;
            col.R = colorDialog.Color.R;
        }
    }
    return col;
}

抑制脚本错误消息

对于包含脚本的页面，webbrowser 可能会生成错误，在 webbrowser 的 Winform 版本中，有一个 ScriptErrorsSuppressed 属性，不幸的是，该属性在 WPF webbrowser 中消失了。

// Property in the Winform version.

webBrowser.ScriptErrorsSuppressed = true;

有必要在 WPF webbrowser 中实现此功能。

using System.Reflection;

public static void HideScriptErrors(WebBrowser wb, bool Hide)
{
    FieldInfo FieldInfoComWebBrowser = typeof(WebBrowser).GetField
    ("_axIWebBrowser2", BindingFlags.Instance | BindingFlags.NonPublic);

    if (FieldInfoComWebBrowser == null)
    { 
    return;
    }

    object ComWebBrowser = FieldInfoComWebBrowser.GetValue(wb);

    if (ComWebBrowser == null)
    { 
        return;
    }

    ComWebBrowser.GetType().InvokeMember("Silent", 
    BindingFlags.SetProperty, null, ComWebBrowser, new object[] { Hide });
}

结论

感谢您阅读本技巧。 我期待您的反馈。

许可证

此技巧以及任何相关的源代码和文件均已获得 Code Project 开放许可证 (CPOL) 的许可