Freigeben über

Wie verwende ich das HTML-Editor-Steuerelement? (VB)

von Microsoft

HTMLEditor ist ein ASP.NET AJAX-Steuerelement, mit dem Sie HTML-Inhalte einfach über Schaltflächen in einer Symbolleiste erstellen und bearbeiten können.

Das Ziel dieses Lernprogramms besteht darin, Ihnen einen Überblick über das HTML-Editor-Steuerelement bereitzustellen, das im AJAX Control Toolkit enthalten ist. Der HTML-Editor enthält Optionen zum Ändern des Schriftgrads, Auswählen einer Schriftart, Ändern der Hintergrundfarbe, Ändern der Vordergrundfarbe, Hinzufügen von Links, Hinzufügen von Bildern, Ändern der Textausrichtung und Ausführen von Ausschneiden, Kopieren und Einfügen (siehe Abbildung 1).

Der HTML-Editor

Abbildung 01: Der HTML-Editor(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Mit dem HTML-Editor können Sie Inhalte mithilfe eines Entwurfsmodus eingeben oder HTML direkt eingeben. Sie haben auch die Möglichkeit, ihre HTML-Inhalte in der Vorschau anzuzeigen (siehe Abbildung 2).

Schaltflächen

Abbildung 02: Schaltflächen "Entwurf", "HTML" und "Vorschau" (Klicken Sie, um das Bild in voller Größe anzuzeigen)

In diesem Lernprogramm erfahren Sie, wie Sie den HTML-Editor anzeigen, die Symbolleistenschaltflächen anpassen, die im HTML-Editor angezeigt werden, und wie Sie Websiteübergreifende Skriptingangriffe vermeiden.

Anzeigen des HTML-Editors

Bevor Sie den HTML-Editor auf einer ASP.NET Seite verwenden können, müssen Sie der Seite zuerst ein ScriptManager-Steuerelement hinzufügen. Das ScriptManager-Steuerelement befindet sich unter der Registerkarte AJAX-Erweiterungen in der Visual Studio/Visual Web Developer Express-Toolbox.

Sie sollten das ScriptManager-Steuerelement oben auf der Seite vor allen anderen Steuerelementen auf der Seite platzieren. Sie können sie z. B. direkt unter dem öffnenden serverseitigen <Formulartag> platzieren.

Das HTML-Editor-Steuerelement befindet sich in der Toolbox mit den restlichen AJAX Control Toolkit-Steuerelementen. Es wird als Editor-Steuerelement bezeichnet (siehe Abbildung 3).

Das HTML-Editor-Steuerelement

Abbildung 03: Das HTML-Editor-Steuerelement(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nachdem Sie den HTML-Editor auf eine Seite gezogen haben, können Sie dessen Eigenschaften im Eigenschaftenblatt festlegen. Beispielsweise möchten Sie normalerweise die Eigenschaften "Width" und "Height" festlegen. Eintrag 1 enthält die Quelle für eine ASP.NET Seite, die einen HTML-Editor enthält.

Listing 1 – SimpleEditor.aspx

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>
<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ltlResult.Text = Editor1.Content
    End Sub
</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>

Die Seite in Listing 1 enthält ein HTML-Editor-Steuerelement, ein Schaltflächen-Steuerelement und ein Literal-Steuerelement. Wenn Sie auf die Schaltfläche klicken, wird der Inhalt des HTML-Editors im Literal-Steuerelement angezeigt (siehe Abbildung 4).

Senden eines Formulars mit einem HTML-Editor

Abbildung 04: Senden eines Formulars mit einem HTML-Editor(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Die HTML-Editor-Inhaltseigenschaft wird verwendet, um den html-Inhalt abzurufen, der in den HTML-Editor eingegeben wurde. Beachten Sie, dass dieser HTML-Inhalt JavaScript enthalten kann. Im nächsten Abschnitt wird erläutert, wie Sie JavaScript Injection Attacks verhindern können.

Anpassen der HTML-Editorsymbolleiste

Sie können genau anpassen, welche Schaltflächen im Editor angezeigt werden. Sie können beispielsweise die HTML-Registerkarte entfernen, um zu verhindern, dass Benutzer den HTML-Editor in den HTML-Modus wechseln. Sie können auch die Dropdownliste für den Schriftgrad entfernen, um zu verhindern, dass Benutzer in einem Forumnachrichtbeitrag übermäßig großen Text erstellen (siehe Abbildung 5).

Ein angepasster HTML-Editor

Abbildung 05: Ein angepasster HTML-Editor(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Sie passen die Symbolleistenschaltflächen an, indem Sie einen neuen HTML-Editor aus der Basis-Editor-Klasse ableiten. Beispielsweise enthält der benutzerdefinierte Editor in Listing 2 nur Symbolleistenschaltflächen für fett und kursiv. Alle anderen Symbolleistenschaltflächen wurden entfernt. Darüber hinaus wurde die HTML-Registerkarte vom unteren Rand des Editors entfernt (aber die Registerkarten "Entwurf" und "Vorschau" sind noch vorhanden).

Liste 2 – App_Code\CustomEditor.vb

Imports AjaxControlToolkit.HTMLEditor

Namespace MyControls

    Public Class CustomEditor
        Inherits Editor
        Protected Overrides Sub FillTopToolbar()
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic())
        End Sub

        Protected Overrides Sub FillBottomToolbar()
            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode())
            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode())
        End Sub
    End Class

End Namespace

Sie müssen die Klasse in Listing 2 zu Ihrem App_Code Ordner hinzufügen, damit die Klasse automatisch kompiliert wird. Wenn der ordner "App_Code" in Ihrer Website nicht vorhanden ist, können Sie einfach den Ordner hinzufügen.

Nachdem Sie einen benutzerdefinierten Editor erstellt haben, können Sie ihn auf die gleiche Weise zu einer ASP.NET Seite hinzufügen, wie Sie den normalen HTML-Editor hinzufügen (siehe Eintrag 3).

Eintrag 3 - ShowCustomEditor.aspx

<%@ Page Language="VB" %>
<%@ 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 ID="CustomEditor1" 
        Width="450px"  
        Height="200px"
        runat="server" />
    
    </div>
    </form>
</body>
</html>

Vermeiden websiteübergreifender Skriptingangriffe (XSS)

Wenn Sie Eingaben von einem Benutzer akzeptieren und diese Eingabe auf Ihrer Website erneut anzeigen, öffnen Sie Ihre Website potenziell für XSS-Angriffe (Cross-Site Scripting). Theoretisch könnte ein böswilliger Hacker JavaScript-Code übermitteln, der ausgeführt wird, wenn die Eingabe erneut angezeigt wird. JavaScript kann verwendet werden, um Benutzer-Kennwörter oder andere vertrauliche Informationen zu stehlen.

Normalerweise können Sie XSS-Angriffe durch HTML-Codierung der Eingaben, die Sie von einem Nutzer erhalten, bevor Sie sie auf einer Webseite anzeigen, abwehren. HTML-Codierung der Ausgabe des HTML-Editors würde jedoch nicht nur die <Script>-Tags, sondern auch alle HTML-Tags codieren. Mit anderen Worten, Sie würden alle Formatierungen verlieren, z. B. den Schrifttyp, den Schriftgrad und die Hintergrundfarbe.

Wenn Sie vertrauliche Informationen von Ihren Benutzern sammeln , z. B. Kennwörter, Kreditkartennummern und Sozialversicherungsnummern, sollten Sie keine nicht codierten Inhalte anzeigen, die Sie mit dem HTML-Editor von einem Benutzer abrufen. Sie sollten den HTML-Editor nur in Situationen verwenden, in denen Sie den HTML-Inhalt nicht erneut anzeigen oder der HTML-Inhalt von einer vertrauenswürdigen Partei an Ihre Website übermittelt wird.

Stellen Sie sich beispielsweise vor, dass Sie eine Bloganwendung erstellen. In dieser Situation ist es sinnvoll, den HTML-Editor beim Verfassen von Blogbeiträgen zu verwenden. Sie sind die einzige Person, die einen Blogbeitrag einreicht, und vermutlich können Sie sich darauf verlassen, kein schädliches JavaScript abzusenden. Es ist jedoch nicht sinnvoll, den HTML-Editor zu verwenden, wenn anonyme Benutzer Kommentare posten können. Besonders vorsichtig sollten Sie in Situationen sein, in denen Benutzer vertrauliche Informationen wie Kennwörter übermitteln. Potenziell könnte ein böswilliger Benutzer einen Kommentar posten, der das richtige JavaScript zum Stehlen eines Kennworts enthält.

Zusammenfassung

In diesem Lernprogramm wurde Ihnen eine kurze Übersicht über das HTML-Editor-Steuerelement bereitgestellt, das im AJAX Control Toolkit enthalten ist. Sie haben gelernt, wie Sie den HTML-Editor verwenden, um umfangreiche Inhalte von einem Benutzer zu akzeptieren und den Inhalt an den Server zu übermitteln. Außerdem wurde erläutert, wie Sie die Symbolleistenschaltflächen anpassen können, die vom HTML-Editor angezeigt werden. Schließlich haben Sie gelernt, wie Sie siteübergreifende Skriptingangriffe vermeiden, wenn Sie den HTML-Editor verwenden, um potenziell böswillige Eingaben zu akzeptieren.

Zurück

  • Last updated on