{"id":767,"date":"2013-09-24T06:57:23","date_gmt":"2013-09-24T06:57:23","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=767"},"modified":"2013-09-24T07:03:40","modified_gmt":"2013-09-24T07:03:40","slug":"ajax-control-toolkit-htmleditorextender-vs-editor","status":"publish","type":"post","link":"http:\/\/www.rezafaisal.net\/?p=767","title":{"rendered":"Ajax Control Toolkit : HTMLEditorExtender vs Editor"},"content":{"rendered":"<p>Berikut ini adalah gambar dari kontrol yang telah disebutkan di atas.<\/p>\n<p><a href=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"image\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image_thumb.png\" border=\"0\" alt=\"image\" width=\"375\" height=\"152\" \/><\/a><\/p>\n<p>Kontrol ini memberikan fasilitas untuk memberikan style pada tulisan yang diinputkan oleh user. Berbeda jika kita menggunakan kontrol TextBox saja, yang hanya dapat menginputkan plain text.<\/p>\n<p>Walaupun fungsi kedua kontrol tersebut mempunyai fungsi yang sama seperti yang telah disebutkan di atas, tetap cara penggunannya agak sedikit berbeda.<\/p>\n<p><strong><em>HTMLEditorExtender<\/em><\/strong><\/p>\n<p>Sesuai namanya, kontrol ini berfungsi untuk memberikan fungsionalitas tambahan kepada kontrol lain, yaitu kontrol TextBox. Kontrol TextBox yang awalnya hanya biasa-biasa saja, menjadi lebih spesial seperti pada gambar berikut :<\/p>\n<p><a href=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image1.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"image\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image_thumb1.png\" border=\"0\" alt=\"image\" width=\"450\" height=\"201\" \/><\/a><\/p>\n<p>Dengan kode seperti berikut :<\/p>\n<p><a href=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image2.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"image\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image_thumb2.png\" border=\"0\" alt=\"image\" width=\"323\" height=\"127\" \/><\/a><\/p>\n<p>Pada kode tersebut dapat dilihat TextBox dengan ID adalah TextBox_Editor, kemudian pada control ajaxToolkit HtmlEditorExtender terdapat atribut TargetControlID yang berisi nilai dari TextBox_Editor, sehingga akhirnya didapatkan tampilan seperti gambar di atas.<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>Editor<\/em><\/strong><\/p>\n<p>Kontrol ini berbeda jika dibandingkan dengan kontrol HtmlEditorExtender dimana kontrol ini berdiri sendiri. Untuk mendapatkan tampilan seperti ini :<\/p>\n<p><a href=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image3.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"image\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image_thumb3.png\" border=\"0\" alt=\"image\" width=\"450\" height=\"278\" \/><\/a><\/p>\n<p>Cukup digunakan kode seperti berikut :<\/p>\n<p><a href=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image4.png\"><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"image\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image_thumb4.png\" border=\"0\" alt=\"image\" width=\"250\" height=\"76\" \/><\/a><\/p>\n<p>Jika diperhatikan pada <a href=\"http:\/\/www.asp.net\/ajaxLibrary\/AjaxControlToolkitSampleSite\/\">Ajax Control Toolkit Sample Site<\/a>, kita mungkin tidak menemuni kontrol ini pada daftar yang ada. Sehingga ada perbedaan jika ingin menggunakan kontrol ini. Jika kontrol-kontrol umum Ajax Control Toolkit sudah dapat digunakan jika kita mendaftarkan baris ini pada web.config :<\/p>\n<p>&lt;add tagPrefix=&#8221;ajaxToolkit&#8221; assembly=&#8221;AjaxControlToolkit&#8221; namespace=&#8221;AjaxControlToolkit&#8221; \/&gt;<\/p>\n<p>Maka untuk menggunakan kontrol Editor ini, kita harus mendaftar baris berikut ini bersama baris di atas :<\/p>\n<p>&lt;add tagPrefix=&#8221;ajaxToolkit&#8221; assembly=&#8221;AjaxControlToolkit&#8221; namespace=&#8221;AjaxControlToolkit.HTMLEditor&#8221; \/&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>Penutup<\/em><\/strong><\/p>\n<p>Masih ada perbedaan lain dalam menggunakan kontrol HtmlEditorExtender, salah satunya adalah penggunaan AntiXSS Sanitizer untuk pengamanan. Hal ini akan dibahas pada posting selanjutnya :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Berikut ini adalah gambar dari kontrol yang telah disebutkan di atas. Kontrol ini memberikan fasilitas untuk memberikan style pada tulisan yang diinputkan oleh user. Berbeda jika kita menggunakan kontrol TextBox saja, yang hanya dapat menginputkan plain text. Walaupun fungsi kedua&hellip;<\/p>\n","protected":false},"author":1,"featured_media":759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2013\/09\/image1.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-cn","_links":{"self":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=767"}],"version-history":[{"count":1,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":768,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/767\/revisions\/768"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/759"}],"wp:attachment":[{"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}