HTML Düzenleyici Denetimini nasıl kullanırım?How do I use the HTML Editor Control? (C#)(C#)

Microsoft tarafındanby Microsoft

HTMLEditor, bir araç çubuğundaki düğmeler aracılığıyla HTML içeriğini kolayca oluşturmanıza ve düzenlemenize olanak tanıyan ASP.NET bir AJAX Control'dür.HTMLEditor is an ASP.NET AJAX Control that allows you to easily create and edit HTML content via buttons in a toolbar.

Bu öğreticinin amacı, AJAX Control Toolkit ile birlikte verilen HTML Düzenleyici denetimine genel bir bakış sağlamaktır.The goal of this tutorial is to provide you with an overview of the HTML Editor control included with the AJAX Control Toolkit. HTML Düzenleyicisi yazı tipi boyutunu değiştirme, yazı tipi seçme, arka plan rengini değiştirme, ön plan rengini değiştirme, bağlantılar ekleme, resim ekleme, metin hizalamasını değiştirme ve kesme, kopyalama ve yapıştırma işlemlerini gerçekleştirme seçeneklerini içerir (Bkz. Şekil 1).The HTML Editor includes options for changing font size, selecting a font, changing background color, modifying the foreground color, adding links, adding images, changing text alignment, and performing cut, copy, and paste operations (see Figure 1).

HTML DüzenleyicisiThe HTML Editor

Şekil 01: HTML Düzenleyicisi(Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 01: The HTML Editor(Click to view full-size image)

HTML düzenleyicisi bir tasarım modu kullanarak içerik girmenizi sağlar veya doğrudan HTML girebilirsiniz.The HTML editor enables you to enter content using a design mode or you can enter HTML directly. Ayrıca HTML içeriğinizi önizleme seçeneği de size verilir (Bkz. Şekil 2).You also are provided with the option to preview your HTML content (see Figure 2).

Tasarım, HTML ve Önizleme düğmeleriDesign, HTML, and Preview buttons

Şekil 02: Tasarım, HTML ve Önizleme düğmeleri(Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 02: Design, HTML, and Preview buttons(Click to view full-size image)

Bu eğitimde, HTML Düzenleyicisi'ni nasıl görüntüleyesiniz, HTML Düzenleyicisi'nde görünen araç çubuğu düğmelerini nasıl özelleştirdiğinizi ve Siteler Arası Komut Dosyası Saldırılarından nasıl kaçınabileceğinizi öğrenirsiniz.In this tutorial, you learn how to display the HTML Editor, how to customize the toolbar buttons that appear in the HTML Editor, and how to avoid Cross-Site Scripting Attacks.

HTML Düzenleyicisini GörüntülemeDisplaying the HTML Editor

HTML Düzenleyicisini ASP.NET bir sayfada kullanabilmek için önce sayfaya bir ScriptManager denetimi eklemeniz gerekir.Before you can use the HTML Editor in an ASP.NET page, you must first add a ScriptManager control to the page. ScriptManager denetimi, Visual Studio/Visual Web Developer Express araç kutusundaki AJAX Uzantıları sekmesinin altında yer alır.The ScriptManager control is located beneath the AJAX Extensions tab in the Visual Studio/Visual Web Developer Express toolbox.

Sayfadaki diğer denetimlerden önce ScriptManager denetimini sayfanın en üstüne yerleştirmelisiniz.You should place the ScriptManager control at the top of the page before any other controls on the page. Örneğin, bunu sunucu tarafındaki <açılış form> etiketinin hemen altına yerleştirebilirsiniz.For example, you can place it immediately below the opening server-side <form> tag.

HTML Düzenleyici denetimi, AJAX Control Toolkit denetimlerinin geri kalanıyla birlikte araç kutusunda bulunur.The HTML Editor control is located in the toolbox with the rest of the AJAX Control Toolkit controls. Editör denetimi olarak adlandırılır (bkz. Şekil 3).It is named the Editor control (see Figure 3).

HTML Düzenleyici denetimiThe HTML Editor control

Şekil 03: HTML Düzenleyici kontrolü(Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 03: The HTML Editor control(Click to view full-size image)

HTML Düzenleyicisini bir sayfaya sürükledikten sonra, özelliklerini özellik sayfasında ayarlayabilirsiniz.After you drag the HTML Editor onto a page, you can set its properties in the property sheet. Örneğin, normalde Genişlik ve Yükseklik özelliklerini ayarlamak istiyorsunuz.For example, you normally want to set the Width and Height properties. Listeleme 1, HTML düzenleyicisi içeren bir ASP.NET sayfasının kaynağını içerir.Listing 1 contains the source for an ASP.NET page that contains an HTML editor.

Listeleme 1 - SimpleEditor.aspxListing 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>

Listeleme 1'deki sayfa bir HTML Düzenleyici denetimi, düğme denetimi ve Bir Literal denetim içerir.The page in Listing 1 contains an HTML Editor control, a Button control, and a Literal control. Düğmeyi tıklattığınızda, HTML Düzenleyicisi'nin içeriği Literal denetiminde görünür (Bkz. Şekil 4).When you click the button, the contents of the HTML Editor appear in the Literal control (see Figure 4).

HTML Düzenleyicisi ile form göndermeSubmitting a form with an HTML Editor

Şekil 04: HTML Düzenleyicisi ile form gönderme (tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 04: Submitting a form with an HTML Editor(Click to view full-size image)

HTML Düzenleyici İçeriği özelliği, HTML Düzenleyicisi'ne girilen HTML içeriğini almak için kullanılır.The HTML Editor Content property is used to retrieve the HTML content entered into the HTML Editor. Bu HTML içeriğinin JavaScript içerebileceğini unutmayın.Be aware that this HTML content can contain JavaScript. Sonraki bölümde, JavaScript Enjeksiyon Saldırılarını nasıl önleyebileceğinizi tartışıyoruz.In the next section, we discuss how you can prevent JavaScript Injection Attacks.

HTML Düzenleyici araç çubuğunu özelleştirmeCustomizing the HTML Editor Toolbar

Editörde tam olarak hangi düğmelerin görünebileceğini özelleştirebilirsiniz.You can customize exactly which buttons appear in the editor. Örneğin, kullanıcıların HTML Düzenleyicisi'ni HTML moduna dönüştürmesini önlemek için HTML sekmesini kaldırmak isteyebilirsiniz.For example, you might want to remove the HTML tab to prevent users from switching the HTML Editor into HTML mode. Veya, kullanıcıların bir forum ileti gönderisinde aşırı büyük metin oluşturmalarını önlemek için yazı tipi boyutu açılır listesini kaldırmak isteyebilirsiniz (Bkz. Şekil 5).Or, you might want to remove the font size dropdown list to prevent users from creating overly large text in a forum message post (see Figure 5).

Özelleştirilmiş BIR HTML DüzenleyicisiA customized HTML Editor

Şekil 05: Özelleştirilmiş bir HTML Düzenleyicisi(Tam boyutlu görüntüyü görüntülemek için tıklayınız)Figure 05: A customized HTML Editor(Click to view full-size image)

Temel Düzenleyici sınıfından yeni bir HTML Düzenleyicisi türeterek araç çubuğu düğmelerini özelleştirebilirsiniz.You customize the toolbar buttons by deriving a new HTML Editor from the base Editor class. Örneğin, Listeleme 2'deki özel düzenleyici yalnızca kalın ve italik için araç çubuğu düğmeleri içerir.For example, the custom editor in Listing 2 only contains toolbar buttons for bold and italic. Diğer tüm araç çubuğu düğmeleri kaldırıldı.All other toolbar buttons have been removed. Ayrıca, HTML sekmesi editörün alt kısmından kaldırıldı (ancak Tasarım ve Önizleme sekmeleri hala orada).Furthermore, the HTML tab has been removed from the bottom of the editor (but the Design and Preview tabs are still there).

Listeleme 2_- Uygulama Kodu\CustomEditor.csListing 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());        
        }
    }
}

Sınıfın otomatik olarak derlenmesi için_Listeleme 2'deki sınıfı Uygulama Kodu klasörünüze eklemeniz gerekir.You must add the class in Listing 2 to your App_Code folder so that the class will be compiled automatically. Uygulama_Kodu klasörü web sitenizde yoksa, klasörü ekleyebilirsiniz.If the App_Code folder does not exist in your website then you can simply add the folder.

Özel bir düzenleyici oluşturduktan sonra, normal HTML Düzenleyicisini eklediğiniz gibi ASP.NET bir sayfaya ekleyebilirsiniz (bkz.After you create a custom editor, you can add it to an ASP.NET page in the same way as you add the normal HTML Editor (see Listing 3).

Listeleme 3 - ShowCustomEditor.aspxListing 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>

Siteler Arası Komut Dosyası (XSS) Saldırılarından KaçınmaAvoiding Cross-Site Scripting (XSS) Attacks

Bir kullanıcının girdisini kabul ettiğinizde ve web sitenizdeki bu girişi yeniden görüntülediğinizde, web sitenizi Siteler Arası Komut Dosyası (XSS) Saldırılarına açma potansiyeliniz.Whenever you accept input from a user, and redisplay that input on your website, you potentially open your website to Cross-Site Scripting (XSS) Attacks. Teorik olarak, kötü niyetli bir bilgisayar korsanı giriş yeniden görüntülendiğinde çalıştırılan JavaScript kodu gönderebilir.In theory, a malicious hacker could submit JavaScript code that gets executed when the input is redisplayed. JavaScript kullanıcı parolalarını veya diğer hassas bilgileri çalmak için kullanılabilir.The JavaScript could be used to steal user passwords or other sensitive information.

Normalde, xss saldırılarını, bir web sayfasında görüntülemeden önce bir kullanıcıdan aldığınız girişi kodlayarak HTML kodlayarak yenebilirsiniz.Normally, you can defeat XSS attacks by HTML encoding whatever input you retrieve from a user before displaying it in a web page. Ancak, HTML Düzenleyicisi çıktıkodlama HTML sadece <komut> dosyası etiketleri kodlamak olmaz, aynı zamanda tüm HTML etiketleri kodlamak istiyorsunuz.However, HTML encoding the output of the HTML Editor would not only encode <script> tags, it would also encode all HTML tags. Başka bir deyişle, yazı tipi türü, yazı tipi boyutu ve arka plan rengi gibi biçimlendirmenin tümlerini kaybedersiniz.In other words, you would lose all of the formatting such as the font type, font size, and background color.

Parolalar, kredi kartı numaraları ve sosyal güvenlik numaraları gibi kullanıcılarınızdan hassas bilgiler topluyorsanız, HTML Düzenleyicisi olan bir kullanıcıdan aldığınız kodlanmamış içeriği görüntülememelisiniz.If you are collecting sensitive information from your users -- such as passwords, credit-card numbers, and social security numbers - then you should not display un-encoded content that you retrieve from a user with the HTML Editor. HTML Düzenleyicisini yalnızca HTML içeriğini yeniden görüntülemediğiniz veya HTML içeriğinin güvenilir bir taraf tarafından web sitenize gönderildiği durumlarda kullanmalısınız.You should use the HTML Editor only in situations in which you are not redisplaying the HTML content, or the HTML content is being submitted to your website by a trusted party.

Örneğin, bir blog uygulaması oluşturduğunuzu düşünün.Imagine, for example, that you are creating a blog application. Bu durumda, blog gönderileri oluştururken HTML Düzenleyicisi'ni kullanmak mantıklıdır.In this situation, it makes sense to use the HTML Editor when composing blog posts. Bir blog yazısı gönderen tek kişi sizsiniz ve muhtemelen kötü amaçlı JavaScript göndermemek için kendinize güvenebilirsiniz.You are the only one who submits a blog post and, presumably, you can trust yourself not to submit malicious JavaScript. Ancak, anonim kullanıcıların yorum yayınlamasına izin verirken HTML Düzenleyicisi'ni kullanmak mantıklı değildir.However, it does not make sense to use the HTML Editor when allowing anonymous users to post comments. Özellikle kullanıcıların parolalar gibi hassas bilgileri gönderdiği durumlarda dikkatli olmalısınız.You should be especially careful in situations in which users submit sensitive information such as passwords. Kötü amaçlı bir kullanıcı, parola çalmak için doğru JavaScript'i içeren bir yorum yayınlayabilir.Potentially, a malicious user could post a comment that contains the right JavaScript for stealing a password.

ÖzetSummary

Bu eğitimde, AJAX Control Toolkit'te yer alan HTML Düzenleyici denetimine kısa bir genel bakış sunulmuştur.In this tutorial, you were provided with a brief overview of the HTML Editor control included in the AJAX Control Toolkit. HTML Düzenleyicisi'ni kullanarak bir kullanıcıdan zengin içeriği kabul etmeyi ve içeriği sunucuya göndermeyi öğrendiniz.You learned how to use the HTML Editor to accept rich content from a user and submit the content to the server. Ayrıca HTML Düzenleyicisi tarafından görüntülenen araç çubuğu düğmelerini nasıl özelleştirebileceğinizi de tartıştık.We also discussed how you can customize the toolbar buttons that are displayed by the HTML Editor. Son olarak, olası kötü amaçlı girişi kabul etmek için HTML Düzenleyicisi'ni kullanırken Siteler Arası Komut Dosyası Saldırılarından kaçınmayı öğrendiniz.Finally, you learned how to avoid Cross-Site Scripting Attacks when using the HTML Editor to accept potentially malicious input.