Editor kontrolünün araç kutusunu (toolbar) özelleştirme

Editör - Araç Kutusu
Kayıtlı kullanıcılarınızın girecekleri metinleri biçimlendirebilmesi için onlara bir WYSIWYG (What you see is what you get / ne görüyorsanız onu alırsınız) editörü sunmalısınız. Ancak bu durumda da kullanıcının bu editörü amatörce kullanması, içine sakıncalı div ve table kodları yazarak sayfanızın tasarımını bozması söz konusu olabilir. Bu durumda ihtiyacınız olan, varsayılan olarak tüm bu butonları içeren Ajax Control Toolkit HTML editörünün araç kutusunu yani toolbar’ını özelleştirmek. Peki bunu nasıl yapacaksınız?

Projenizin App_Code klasörüne CustomEditor.cs adında bir class ekleyin. İçine aşağıdaki kodları yapıştırın. Ben genel olarak bazı butonları özelleştirdim. Siz isteğinize göre ekleme ve çıkartmalar yapın.

using AjaxControlToolkit.HTMLEditor;

namespace MyControls
{
    public class CustomEditor : Editor
    {
        protected override void FillTopToolbar()
        {
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Undo());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Redo());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColor());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColorClear());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.BackColorSelector());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.BackColorClear());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyLeft());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyCenter());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyRight());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.OrderedList());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Paragraph());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.SubScript());
            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.SuperScript());
        }

        protected override void FillBottomToolbar()
        {
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
            BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
        }
    }
}

Ardından editörü kullanacağınız sayfanın en üst satırından bu özelleştirilmiş editörün tag’ını kaydedin:

<%@ Register namespace="MyControls" tagprefix="custom" %>

Daha sonra editörü kullanacağınız yere şu kodu yapıştırın

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <custom:CustomEditor 
        Width="450px"  
        Height="200px"
        runat="server" />
Recent Posts
Showing 2 comments
  • Emre Başaran
    Cevapla

    Merhaba,
    htmleditor içeriğini veri tabanına kaydederken Tükçe karakter problemi yaşıyorum. Aynı sayfada kullandığım textbox’larda böyle bir problem olmuyor. Acaba htmleditor’le ilgili, encoding seçimi gibi bir şey biliyor musunuz?

  • Rıza Sırman
    Cevapla

    html editör için script manager’da enableGlobalization=true özelliğinin eklenmesi gerekli. Ayrıca veritabanında kaydedilecek alanının veritipinin de text yerine ntext yani unicode metin tipinde tanımlanması gerekir.

Leave a Comment


*