Rıza Sırman » Ajax Control Toolkit http://www.rizasirman.com Dijital Pazarlama ve İletişim Uzmanı Thu, 10 May 2012 08:00:11 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Editor kontrolünün araç kutusunu (toolbar) özelleştirmehttp://www.rizasirman.com/web_tasarim/asp-net/ajax-control-toolkit/editor-kontrolunun-arac-kutusunu-toolbar-ozellestirme/ http://www.rizasirman.com/web_tasarim/asp-net/ajax-control-toolkit/editor-kontrolunun-arac-kutusunu-toolbar-ozellestirme/#comments Thu, 04 Nov 2010 07:23:00 +0000 Rıza Sırman http://www.rizasirman.com/?p=422 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" />
]]> http://www.rizasirman.com/web_tasarim/asp-net/ajax-control-toolkit/editor-kontrolunun-arac-kutusunu-toolbar-ozellestirme/feed/ 2