Ajax HTML Editor Control ve bileşenlerini özelleştirmek?

Ajax Html Editör Kontrolü'nü daha önceki bloglarda nasıl Asp.Net Web projemize ekleyebileceğimizi yazmıştım.O yazımda Ajax Control Toolkit üyesinden kısaca bahsetmiş ve Web uygulamalarımızda sağladığı faydalarıda anlatmıştım.Bu yararlı Ajax üyesi hakkındaki bu 2nci yazıda HTML Editör'ün varsayılan bileşenlerini azaltarak daha fazla hız ve sadeliği nasıl sağlayacağımız hakkında  bir örnek yapacağız.Eğer sizde Web uygulamanızda bu türden bir Html Editör istiyorsanız yazının devamında bununla ilgili en iyi önerileri alacaksınız.


Öncelikle Ajax Net Framework 3.5 için yazılmış en basit Ajax Html Editör kullanımı konusundaki yazımı okumanızı öneririm.Elbette bu yazıdada Web uygulamalarında Html Editör ekleme konusunda benzer bilgileride bulabilirsiniz.Şimdi kısaca neler yapılması gerektiğini gözden geçirelim...

Asp.Net Web Uygulamasına Ajax Html Editör nasıl eklenir? ;
1-Web Projenizin ana dizinin yer alan Bin klasöründe AjaxControlToolKit.dll olması gereklidir.
2-Dolasıyla uygulamanızda AjaxControlToolKit referans olarak eklenmiş olmalıdır.
3-Elbette Visuala Studio 2008-2010 sürümleri için ToolBox seçeneklerinde, Ajax referansıyla extender araçlarınında eklenmiş olması gerekir.
Yukarıda bu 3 ana gereksinimi ne olduğu hakkında bir fikriniz yok ise "Ajax Control Toolkit nedir ve nasıl kullanılır" konusundaki blogu öncelikle bir göz atabilirsiniz.

1-Varsayılan tüm özellikleriyle Ajax Html Editör eklemek
Bu Ajax kontrolü için yapılabilecek ekstra bir kod yapılandırması gerekmez ve basit bir şekilde Visual Studio Toolbox sekmesinden "Editör" extender sürükle bırak mantığı ile projenize eklenir.Bu durumda Ajax kontrolünü kullanabilmek için projede ayrıca Ajax Entenders sekmesinden birde "ScriptManager" eklemeniz halinde sorunsuzca çalışır bu işlemler sonrasında şu türden bir kod bloğunuz olacaktır.
Referans

%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="cc1"

HTML

2-Ajax HTML Editör bileşenlerini nasıl özelleştirebiliriz.?
Tüm özellikleri ile herhangi bir form içinde bulunan Editör aslında tüm görevleri yerine getirebilir durumdadır.Fakat bazen tüm özelliklerin kullanıcı tarafından kullanılmasını istemeye biliriz.Buna bir kaç örnek verecek olursak örneğin;Kullanıcılar Html kodlarını eklemelerini,Word veya Excel^den veri yapıştırmalarını engelememiz gerekebilir.Yada kaydedilecek metinlerin biçimlendirilmesinide engellememiz lazım olabilir.O halde yapmamız gereken AjaxControlTolKit sınıfı içerinde bir class yazarak bazı şeyler ekleyip çıkarmamız ve bunuda Referans-Namespace olarak eklememiz gerekir.Şöyleki...
Uygulama dizininizde bulunan yada yeni ekleyeceğiniz "App_Code" klasöründe SimpleEditör.vb Class dosyası oluşturun ve Imports AjaxControlToolkit.HTMLEditor Êkleyin ve şu kodları yapıştırın...

Namespace SerkanSenyuz
    Public Class SimpleEditor
        Inherits Editor
        Protected Overloads Overrides Sub FillTopToolbar()
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PasteWord())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.InsertLink())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode())
        End Sub
        Protected Overloads 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

Yukarıdaki SimpleEditör.vb içeriğindende anlaşılabileceği gibi bazı Ajax HMTL Editör bileşenlerini eklediğimizi bu class sayesinde yapılandırmış olduk.
Şimdi ise bu yapılandırmayı Web Form kısmında nasıl kullacağımıza bakalım...
Tıpkı ilk örnekteki olan AjaxControlTolKit referasın yerine bu kez aşağıdaki referans bilgisini ekleyeceğiz.

<%@ Register Namespace="SerkanSenyuz" TagPrefix="BasicEditor" %>

Ardından HTML kısmında ise HTML Editörü şu şekilde özelleştirilmiş olarak Web uygulamasında kullanabileceğiz.

    
    
HTML Editor-1

HTML Editör-2 Özelleştirilmiş Ajax HMTL Eitör
     
    

Tüm bu yaptıklarımızdan sonra Ajax HTML Editörümüzün yeni görüntüsü ise şu şekilde olacak...

      Bu Yazının Sponsorları