Jak korzystać z kontrolki edytora HTML? (C#)

przez Microsoft

HTMLEditor to ASP.NET AJAX Control, który pozwala łatwo tworzyć i edytować zawartość HTML za pomocą przycisków na pasku narzędzi.

Celem tego samouczka jest zapewnienie przeglądu formantu edytora HTML dołączonego do zestawu narzędzi ajax control toolkit. Edytor HTML zawiera opcje zmiany rozmiaru czcionki, zaznaczenia czcionki, zmiany koloru tła, modyfikowania koloru pierwszego planu, dodawania łączy, dodawania obrazów, zmieniania wyrównania tekstu oraz wykonywania operacji wycinania, kopiowania i wklejania (patrz Rysunek 1).

Edytor HTML

Rysunek 01: EdytorHTML(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Edytor HTML umożliwia wprowadzanie zawartości w trybie projektowania lub można wprowadzić kod HTML bezpośrednio. Dostępna jest również opcja wyświetlania podglądu zawartości HTML (patrz rysunek 2).

Przyciski Projektowania, HTML i Podglądu

Rysunek 02: Przyciski projektowania, HTML i podglądu(Kliknij,aby wyświetlić pełnowymiarowy obraz)

W tym samouczku dowiesz się, jak wyświetlić Edytor HTML, jak dostosować przyciski paska narzędzi, które pojawiają się w Edytorze HTML, oraz jak uniknąć ataków skryptów krzyżowych.

Wyświetlanie edytora HTML

Aby można było używać Edytora HTML na stronie ASP.NET, należy najpierw dodać kontrolkę ScriptManager do strony. Formant ScriptManager znajduje się poniżej karty Rozszerzenia AJAX w przyborniku programu Visual Studio/Visual Web Developer Express.

Formant ScriptManager należy umieścić w górnej części strony przed innymi formantami na stronie. Na przykład można umieścić go bezpośrednio pod <otwierającym tagiem formularza> po stronie serwera.

Formant edytora HTML znajduje się w przyborniku z pozostałymi elementami sterującymi ajax control toolkit. Nosi nazwę kontrolki edytora (patrz rysunek 3).

Kontrolka Edytor HTML

Rysunek 03: Kontrolka edytoraHTML(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Po przeciągnięciu edytora HTML na stronę można ustawić jego właściwości w arkuszu właściwości. Na przykład zwykle chcesz ustawić szerokość i wysokość właściwości. Lista 1 zawiera źródło ASP.NET strony zawierającej edytor HTML.

Aukcja 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>

Strona w aukcji 1 zawiera kontrolkę edytora HTML, kontrolkę Button i formant literał. Po kliknięciu przycisku zawartość edytora HTML pojawi się w formancie Dosłowne (patrz Rysunek 4).

Przesyłanie formularza za pomocą edytora HTML

Rysunek 04: Przesyłanie formularza z edytorem HTML(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Właściwość Zawartość edytora HTML służy do pobierania zawartości HTML wprowadzonej do edytora HTML. Należy pamiętać, że ta zawartość HTML może zawierać javascript. W następnej sekcji omówimy, jak można zapobiec atakom iniekcji JavaScript.

Dostosowywanie paska narzędzi Edytora HTML

Można dostosować dokładnie, które przyciski są wyświetlane w edytorze. Na przykład można usunąć kartę HTML, aby uniemożliwić użytkownikom przełączanie edytora HTML w tryb HTML. Możesz też usunąć listę rozwijaną rozmiaru czcionki, aby uniemożliwić użytkownikom tworzenie zbyt dużego tekstu w poście z wiadomości na forum (patrz Rysunek 5).

Dostosowany edytor HTML

Rysunek 05: Dostosowany edytorHTML(Kliknij, aby wyświetlić pełnowymiarowy obraz)

Przyciski paska narzędzi można dostosować, wyprowadzając nowy edytor HTML z podstawowej klasy Edytora. Na przykład edytor niestandardowy w aukcji 2 zawiera tylko przyciski paska narzędzi dla pogrubienia i kursywy. Wszystkie inne przyciski paska narzędzi zostały usunięte. Ponadto karta HTML została usunięta z dołu edytora (ale karty Projektowanie i podgląd nadal istnieją).

Lista 2_- Kod aplikacji\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());        
        }
    }
}

Należy dodać klasę w aukcji 2_do folderu Kod aplikacji, tak aby klasa zostanie skompilowana automatycznie. Jeśli folder_Kod aplikacji nie istnieje w witrynie sieci Web, możesz po prostu dodać folder.

Po utworzeniu edytora niestandardowego można dodać go do strony ASP.NET w taki sam sposób, jak dodanie zwykłego edytora HTML (zobacz Lista 3).

Lista 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>

Unikanie ataków skryptów krzyżowych (XSS)

Za każdym razem, gdy akceptujesz dane wejściowe od użytkownika i ponownie wykaż te dane wejściowe w witrynie, potencjalnie otwierasz witrynę na ataki XSS (Cross-Site Scripting). Teoretycznie złośliwy haker może przesłać kod JavaScript, który zostanie wykonany po ponownym wykasumowanie danych wejściowych. JavaScript może służyć do kradzieży haseł użytkowników lub innych poufnych informacji.

Zwykle można pokonać ataki XSS przez kodowanie HTML niezależnie od danych wejściowych pobranych od użytkownika przed wyświetleniem go na stronie internetowej. Jednak kodowanie HTML dane wyjściowe edytora HTML <> nie tylko koduje tagi skryptów, ale także koduje wszystkie tagi HTML. Innymi słowy, można utracić wszystkie formatowania, takie jak typ czcionki, rozmiar czcionki i kolor tła.

Jeśli zbierasz poufne informacje od użytkowników , takie jak hasła, numery kart kredytowych i numery ubezpieczenia społecznego , nie należy wyświetlać niezakodowanej zawartości pobranej od użytkownika za pomocą Edytora HTML. Edytor HTML należy używać tylko w sytuacjach, w których zawartość HTML nie jest ponownie wyeksponowana lub zawartość HTML jest przesyłana do witryny przez zaufaną stronę.

Wyobraź sobie, na przykład, że tworzysz aplikację blogu. W tej sytuacji warto używać edytora HTML podczas tworzenia wpisów w blogu. Jesteś jedynym, który przesyła wpis na blogu i, prawdopodobnie, można zaufać sobie, aby nie przesyłać złośliwy JavaScript. Jednak nie ma sensu używać edytora HTML, gdy zezwalasz anonimowym użytkownikom na publikowanie komentarzy. Należy zachować szczególną ostrożność w sytuacjach, w których użytkownicy przesyłają poufne informacje, takie jak hasła. Potencjalnie złośliwy użytkownik może opublikować komentarz zawierający odpowiedni kod JavaScript do kradzieży hasła.

Podsumowanie

W tym samouczku otrzymasz krótki przegląd formantu edytora HTML zawartego w zestawie narzędzi ajax control. Dowiedzialiście się, jak używać edytora HTML do akceptowania zawartości rozszerzonej od użytkownika i przesyłania jej do serwera. Omówiliśmy również, jak można dostosować przyciski paska narzędzi, które są wyświetlane przez edytor HTML. Na koniec dowiedziałeś się, jak uniknąć ataków skryptów krzyżowych podczas korzystania z edytora HTML do akceptowania potencjalnie złośliwych danych wejściowych.