如何实现使用 HTML 编辑器控件？ (C#)

项目
07/13/2023

由 Microsoft

HTMLEditor 是一种 ASP.NET AJAX 控件，可用于通过工具栏中的按钮轻松创建和编辑 HTML 内容。

本教程的目的是提供 AJAX 控件工具包附带的 HTML 编辑器控件的概述。 HTML 编辑器包括用于更改字号、选择字体、更改背景色、修改前景色、添加链接、添加图像、更改文本对齐方式以及执行剪切、复制和粘贴操作的选项， (见图 1) 。

图 01：HTML 编辑器 (单击以查看全尺寸图像)

使用 HTML 编辑器，可以使用设计模式输入内容，也可以直接输入 HTML。还提供了预览 HTML 内容的选项 (请参阅图 2) 。

图 02：“设计”、“HTML”和“预览”按钮 (单击以查看全尺寸图像)

本教程介绍如何显示 HTML 编辑器、如何自定义 HTML 编辑器中显示的工具栏按钮，以及如何避免跨站点脚本攻击。

显示 HTML 编辑器

必须先将 ScriptManager 控件添加到页面，然后才能在 ASP.NET 页中使用 HTML 编辑器。 ScriptManager 控件位于 Visual Studio/Visual Web Developer Express 工具箱中的“AJAX 扩展”选项卡下方。

应将 ScriptManager 控件放在页面顶部，放在页面上的任何其他控件之前。例如，可以将它放在打开的服务器端 <表单> 标记的正下方。

HTML 编辑器控件位于包含其余 AJAX 控件工具包控件的工具箱中。它命名为编辑器控件， (请参阅图 3) 。

图 03：HTML 编辑器控件 (单击以查看全尺寸图像)

将 HTML 编辑器拖到页面上后，可以在属性表中设置其属性。例如，通常想要设置 Width 和 Height 属性。列表 1 包含包含 HTML 编辑器的 ASP.NET 页的源。

清单 1 - SimpleEditor.aspx

<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit.HTMLEditor" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        ltlResult.Text = Editor1.Content;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <cc1:Editor 
            ID="Editor1" 
            Width="450px"  
            Height="200px"
            runat="server"/>
        <br />
        <asp:Button
            id="btnSubmit"
            Text="Submit"
            Runat="server" onclick="btnSubmit_Click" />
    
        <hr />
        <h1>You Entered:</h1>
        
        <asp:Literal
            id="ltlResult"
            Runat="server" />
    
    </div>
    </form>
</body>
</html>

清单 1 中的页面包含 HTML 编辑器控件、Button 控件和文本控件。单击该按钮时，HTML 编辑器的内容将显示在文本控件中， (请参阅图 4) 。

图 04：使用 HTML 编辑器提交表单 (单击以查看全尺寸图像)

HTML 编辑器内容属性用于检索在 HTML 编辑器中输入的 HTML 内容。请注意，此 HTML 内容可以包含 JavaScript。在下一部分中，我们将讨论如何防止 JavaScript 注入攻击。

可以自定义编辑器中确切显示的按钮。例如，你可能想要删除 HTML 选项卡，以防止用户将 HTML 编辑器切换到 HTML 模式。或者，您可能希望删除字号下拉列表，以防止用户在论坛消息帖子中创建过大的文字 (请参阅图 5) 。

图 05：自定义 HTML 编辑器 (单击以查看全尺寸图像)

通过从基编辑器类派生新的 HTML 编辑器来自定义工具栏按钮。例如，清单 2 中的自定义编辑器仅包含粗体和斜体工具栏按钮。已删除所有其他工具栏按钮。此外，“HTML”选项卡已从编辑器 (底部删除，但“设计和预览”选项卡仍) 。

清单 2 - App_Code\CustomEditor.cs

using AjaxControlToolkit.HTMLEditor;

namespace MyControls
{
    public class CustomEditor : Editor
    {
        protected override void FillTopToolbar()
        {
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
        }

        protected override void FillBottomToolbar()
        {
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());        
        }
    }
}

必须将清单 2 中的类添加到 App_Code 文件夹中，以便自动编译该类。如果网站中不存在App_Code文件夹，则只需添加该文件夹即可。

创建自定义编辑器后，可以像添加普通 HTML 编辑器一样将其添加到 ASP.NET 页面， (请参阅清单 3) 。

清单 3 - ShowCustomEditor.aspx

<%@ Page Language="C#" %>
<%@ Register namespace="MyControls" tagprefix="custom" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Show Custom Editor</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <custom:CustomEditor 
        Width="450px"  
        Height="200px"
        runat="server" />
    
    </div>
    </form>
</body>
</html>

避免跨站点脚本 (XSS) 攻击

每当接受用户的输入并在网站上重新显示该输入时，您都可能会将网站打开到跨站点脚本 (XSS) 攻击。从理论上讲，恶意黑客可能会提交在重新显示输入时执行的 JavaScript 代码。 JavaScript 可用于窃取用户密码或其他敏感信息。

通常，在网页中显示用户输入之前，可以通过 HTML 编码从用户检索到的任何输入来击败 XSS 攻击。但是，HTML 编辑器的输出的 HTML 编码不仅会对脚本>标记进行编码<，还会对所有 HTML 标记进行编码。换句话说，你会丢失所有格式，例如字体类型、字号和背景色。

如果要从用户收集敏感信息（例如密码、信用卡号码和社会安全号码），则不应显示使用 HTML 编辑器从用户检索到的未编码内容。应仅在未重新显示 HTML 内容或 HTML 内容由受信任的一方提交到您的网站的情况下，才应使用 HTML 编辑器。

例如，假设你正在创建博客应用程序。在这种情况下，在撰写博客文章时使用 HTML 编辑器是有意义的。你是唯一一个提交博客文章的人，大概你可以相信自己不会提交恶意 JavaScript。但是，在允许匿名用户发布评论时，使用 HTML 编辑器是没有意义的。当用户提交敏感信息（如密码）时，应格外小心。恶意用户可能会发布包含正确 JavaScript 的评论来窃取密码。

总结

本教程提供了 AJAX 控件工具包中包含的 HTML 编辑器控件的简要概述。你已了解如何使用 HTML 编辑器接受来自用户的丰富内容并将内容提交到服务器。我们还讨论了如何自定义 HTML 编辑器显示的工具栏按钮。最后，你了解了在使用 HTML 编辑器接受潜在恶意输入时如何避免跨站点脚本攻击。

如何实现使用 HTML 编辑器控件？ (C#)

显示 HTML 编辑器

避免跨站点脚本 (XSS) 攻击

总结

反馈

反馈

其他资源

如何实现使用 HTML 编辑器控件？ (C#)

显示 HTML 编辑器

自定义 HTML 编辑器工具栏

避免跨站点脚本 (XSS) 攻击

总结

反馈

反馈

其他资源