Как использовать элемент управления HTML-редактором? C#

корпорацией Майкрософт

HTMLEditor — это ASP.NET AJAX Control, который позволяет легко создавать и редактировать HTML-контент с помощью кнопок в панели инструментов.

Цель этого учебника состоит в том, чтобы предоставить вам обзор управления HTML редактор включены с AJAX управления Toolkit. Html Editor включает в себя варианты изменения размера шрифта, выбора шрифта, изменения цвета фона, изменения цвета переднего плана, добавления ссылок, добавления изображений, изменения выравнивания текста и выполнения операций разреза, копирования и вставки (см. рисунок 1).

Редактор HTML

Рисунок 01: Html редактор(Нажмите, чтобы посмотреть полноразмерное изображение)

HTML-редактор позволяет вводить содержимое в режиме проектирования или вы можете ввести HTML напрямую. Вам также предоставляется возможность предварительного просмотра HTML-контента (см. рисунок 2).

Кнопки проектирования, HTML и Preview

Рисунок 02: Дизайн, HTML, и Предварительный просмотр кнопок(Нажмите, чтобы посмотреть полноразмерное изображение)

В этом уроке вы узнаете, как отобразить HTML-редактор, как настроить кнопки панели инструментов, которые появляются в редакторе HTML, и как избежать перекрестных атак на сценарии.

Отображение HTML-редактора

Прежде чем использовать HTML-редактор на странице ASP.NET, необходимо сначала добавить элемент управления ScriptManager на страницу. Контроль ScriptManager расположен под вкладкой AJAX Extensions в наборе инструментов Visual Studio/Visual Web Developer Express.

Вы должны поместить элемент управления ScriptManager в верхней части страницы, прежде чем любые другие элементы управления на странице. Например, его можно разместить непосредственно под <тегом формы> сервера.

Управление HTML-редактором находится в наборе инструментов с остальными элементами управления AJAX. Он называется управление редактором (см. рисунок 3).

Управление редактором HTML

Рисунок 03: Управление редактором HTML(Нажмите, чтобы просмотреть полноразмерное изображение)

После перетаскивания HTML-редактора на страницу можно установить его свойства в листе свойств. Например, обычно требуется установить свойства ширины и высоты. Список 1 содержит источник для страницы ASP.NET, содержащей HTML-редактор.

Список 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-редактором, управление кнопкой и буквальное управление. При нажатии кнопки содержимое HTML-редактора отображается в буквальном элементе управления (см. рисунок 4).

Отправка формы с помощью HTML-редактора

Рисунок 04: Отправка формы с HTML Редактор(Нажмите, чтобы посмотреть полноразмерное изображение)

Свойство HTML Editor Content используется для получения HTML-контента, внесенного в HTML-редактор. Имейте в виду, что этот HTML-контент может содержать JavaScript. В следующем разделе мы обсудим, как можно предотвратить атаки инъекций JavaScript.

Настройка панели инструментов html Editor

Вы можете настроить, какие именно кнопки отображаются в редакторе. Например, можно удалить вкладку HTML, чтобы пользователи не переключали HTML-редактор в режим HTML. Или, возможно, вы захотите удалить список выпадающих размеров шрифта, чтобы предотвратить создание пользователями слишком большого текста в сообщении форума (см. рисунок 5).

Индивидуальный HTML-редактор

Рисунок 05: Настраиваемый HTML редактор(Нажмите, чтобы просмотреть полноразмерное изображение)

Вы настраиваете кнопки панели инструментов, выдыхая новый HTML-редактор из класса базового редактора. Например, пользовательский редактор в листинге 2 содержит только кнопки панели инструментов для смелых и курсивных. Все остальные кнопки панели инструментов были удалены. Кроме того, вкладка HTML была удалена из нижней части редактора (но вкладки Design and Preview все еще существуют).

Список 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 не существует на вашем сайте, то вы можете просто добавить папку.

После создания пользовательского редактора его можно добавить на страницу ASP.NET так же, как и обычный HTML-редактор (см. список 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 может быть использован для кражи паролей пользователей или другой конфиденциальной информации.

Как правило, вы можете победить XSS-атаки HTML кодирования любой вход, который вы получаете от пользователя, прежде чем отображать его на веб-странице. Тем не менее, HTML кодирования вывода HTML редактор <не> только кодировать теги скрипта, он также будет кодировать все теги HTML. Другими словами, вы потеряете все форматирование, такие как тип шрифта, размер шрифта и цвет фона.

Если вы собираете конфиденциальную информацию от пользователей, например пароли, номера кредитных карт и номера социального страхования, то вам не следует отображать незакодированный контент, который вы получаете от пользователя с HTML-редактором. Редактор HTML следует использовать только в ситуациях, когда вы не переображаете HTML-контент или HTML-контент передается на ваш веб-сайт доверенной стороной.

Представьте себе, например, что вы создаете приложение для блога. В этой ситуации имеет смысл использовать HTML-редактор при составлении сообщений в блоге. Вы единственный, кто представляет сообщение в блоге и, по-видимому, вы можете доверять себе, чтобы не представить вредоносных JavaScript. Тем не менее, не имеет смысла использовать HTML редактор, когда позволяет анонимным пользователям размещать комментарии. Вы должны быть особенно осторожны в ситуациях, когда пользователи отправляют конфиденциальную информацию, такую как пароли. Потенциально, вредоносный пользователь может опубликовать комментарий, который содержит право JavaScript для кражи пароля.

Сводка

В этом уроке вам был предоставлен краткий обзор управления HTML-редактором, включенным в набор инструментов управления AJAX. Вы узнали, как использовать HTML Редактор принять богатый контент от пользователя и отправить содержимое на сервер. Мы также обсудили, как можно настроить кнопки панели инструментов, отображаемые редактором HTML. Наконец, вы узнали, как избежать кросс-сайт Скриптирование атак при использовании HTML редактор принять потенциально вредоносных ввода.