Bagikan melalui

Bagaimana cara menggunakan Kontrol Editor HTML? (VB)

oleh Microsoft

HTMLEditor adalah kontrol AJAX ASP.NET yang memungkinkan Anda dengan mudah membuat dan mengedit konten HTML melalui tombol di toolbar.

Tujuan dari tutorial ini adalah untuk memberi Anda gambaran umum kontrol Editor HTML yang disertakan dengan Toolkit Kontrol AJAX. Editor HTML mencakup opsi untuk mengubah ukuran font, memilih font, mengubah warna latar belakang, memodifikasi warna latar depan, menambahkan tautan, menambahkan gambar, mengubah perataan teks, dan melakukan operasi potong, salin, dan tempel (lihat Gambar 1).

The HTML Editor

Gambar 01: Editor HTML (Klik untuk melihat gambar ukuran penuh)

Editor HTML memungkinkan Anda memasukkan konten menggunakan mode desain atau Anda dapat memasukkan HTML secara langsung. Anda juga diberikan opsi untuk mempratinjau konten HTML Anda (lihat Gambar 2).

Tombol Desain, HTML, dan Pratinjau

Gambar 02: Tombol Desain, HTML, dan Pratinjau (Klik untuk melihat gambar ukuran penuh)

Dalam tutorial ini, Anda mempelajari cara menampilkan Editor HTML, cara mengkustomisasi tombol toolbar yang muncul di Editor HTML, dan cara menghindari Serangan Skrip Lintas Situs.

Menampilkan Editor HTML

Sebelum dapat menggunakan Editor HTML di halaman ASP.NET, Anda harus terlebih dahulu menambahkan kontrol ScriptManager ke halaman. Kontrol ScriptManager terletak di bawah tab Ekstensi AJAX di kotak alat Visual Studio/Visual Web Developer Express.

Anda harus menempatkan kontrol ScriptManager di bagian atas halaman sebelum kontrol lain di halaman. Misalnya, Anda dapat menempatkannya tepat di bawah tag formulir> sisi <server pembuka.

Kontrol Editor HTML terletak di kotak alat dengan kontrol Toolkit Kontrol AJAX lainnya. Ini diberi nama kontrol Editor (lihat Gambar 3).

Kontrol Editor HTML

Gambar 03: Kontrol Editor HTML (Klik untuk melihat gambar ukuran penuh)

Setelah menyeret Editor HTML ke halaman, Anda dapat mengatur propertinya di lembar properti. Misalnya, Anda biasanya ingin mengatur properti Lebar dan Tinggi. Daftar 1 berisi sumber untuk halaman ASP.NET yang berisi editor HTML.

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

Halaman di Daftar 1 berisi kontrol Editor HTML, kontrol Tombol, dan kontrol Literal. Saat Anda mengklik tombol , konten Editor HTML muncul di kontrol Literal (lihat Gambar 4).

Mengirimkan formulir dengan Editor HTML

Gambar 04: Mengirimkan formulir dengan Editor HTML (Klik untuk melihat gambar ukuran penuh)

Properti Konten Editor HTML digunakan untuk mengambil konten HTML yang dimasukkan ke editor HTML. Ketahuilah bahwa konten HTML ini dapat berisi JavaScript. Di bagian berikutnya, kita membahas bagaimana Anda dapat mencegah Serangan Injeksi JavaScript.

Menyesuaikan Toolbar Editor HTML

Anda dapat menyesuaikan dengan tepat tombol mana yang muncul di editor. Misalnya, Anda mungkin ingin menghapus tab HTML untuk mencegah pengguna mengalihkan Editor HTML ke mode HTML. Atau, Anda mungkin ingin menghapus daftar dropdown ukuran font untuk mencegah pengguna membuat teks yang terlalu besar dalam posting pesan forum (lihat Gambar 5).

Editor HTML yang dikustomisasi

Gambar 05: Editor HTML yang dikustomisasi (Klik untuk melihat gambar ukuran penuh)

Anda menyesuaikan tombol toolbar dengan mendapatkan Editor HTML baru dari kelas Editor dasar. Misalnya, editor kustom di Daftar 2 hanya berisi tombol toolbar untuk tebal dan miring. Semua tombol bilah alat lainnya telah dihapus. Selain itu, tab HTML telah dihapus dari bagian bawah editor (tetapi tab Desain dan Pratinjau masih ada).

Daftar 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

Anda harus menambahkan kelas di Daftar 2 ke folder App_Code Anda sehingga kelas akan dikompilasi secara otomatis. Jika folder App_Code tidak ada di situs web Anda maka Anda cukup menambahkan folder.

Setelah membuat editor kustom, Anda dapat menambahkannya ke halaman ASP.NET dengan cara yang sama seperti Anda menambahkan Editor HTML normal (lihat Daftar 3).

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

Menghindari Serangan Scripting Lintas Situs (XSS)

Setiap kali Anda menerima input dari pengguna, dan memutar ulang input tersebut di situs web Anda, Anda berpotensi membuka situs web Anda ke Serangan Skrip Lintas Situs (XSS). Secara teori, peretas jahat dapat mengirimkan kode JavaScript yang akan dijalankan ketika input diputar ulang. JavaScript dapat digunakan untuk mencuri kata sandi pengguna atau informasi sensitif lainnya.

Biasanya, Anda dapat mengalahkan serangan XSS dengan pengodean HTML apa pun input yang Anda ambil dari pengguna sebelum menampilkannya di halaman web. Namun, pengodean HTML output Editor HTML tidak hanya akan mengodekan <tag skrip> , itu juga akan mengodekan semua tag HTML. Dengan kata lain, Anda akan kehilangan semua pemformatan seperti tipe font, ukuran font, dan warna latar belakang.

Jika Anda mengumpulkan informasi sensitif dari pengguna Anda -- seperti kata sandi, nomor kartu kredit, dan nomor jaminan sosial - maka Anda tidak boleh menampilkan konten yang tidak dikodekan yang Anda ambil dari pengguna dengan Editor HTML. Anda harus menggunakan Editor HTML hanya dalam situasi di mana Anda tidak memutar ulang konten HTML, atau konten HTML sedang dikirimkan ke situs web Anda oleh pihak tepercaya.

Bayangkan, misalnya, bahwa Anda membuat aplikasi blog. Dalam situasi ini, masuk akal untuk menggunakan Editor HTML saat membuat posting blog. Anda adalah satu-satunya yang mengirimkan posting blog dan, mungkin, Anda dapat mempercayai diri Anda sendiri untuk tidak mengirimkan JavaScript berbahaya. Namun, tidak masuk akal untuk menggunakan Editor HTML saat mengizinkan pengguna anonim untuk memposting komentar. Anda harus sangat berhati-hati dalam situasi di mana pengguna mengirimkan informasi sensitif seperti kata sandi. Berpotensi, pengguna jahat dapat memposting komentar yang berisi JavaScript yang tepat untuk mencuri kata sandi.

Ringkasan

Dalam tutorial ini, Anda diberikan gambaran singkat tentang kontrol Editor HTML yang disertakan dalam Toolkit Kontrol AJAX. Anda mempelajari cara menggunakan Editor HTML untuk menerima konten kaya dari pengguna dan mengirimkan konten ke server. Kami juga membahas bagaimana Anda dapat menyesuaikan tombol toolbar yang ditampilkan oleh Editor HTML. Terakhir, Anda mempelajari cara menghindari Serangan Skrip Lintas Situs saat menggunakan Editor HTML untuk menerima input yang berpotensi berbahaya.

Sebelumnya