Blog alskare

.Net y lo que surja

Personalizar el HTMLEditor de AjaxControlToolkit

Posted by alskare en 10/09/2009

Primeros pasos

Una de las novedades que nos ha traído el Ajax Control Toolkit (May 2009 Release) ha sido un editor HTML para nuestras páginas la mar de práctico. Hasta el momento, cada vez que he tenido que hacer uso de algún control similar con la finalidad de que el usuario pueda escribir negritas o subrayados, siempre he tenido que echar mano de algún componente externo. Debo reconocer que alguno de estos controles han sido realmente buenos y han cumplido a la perfección el objetivo. No obstante, al hacer uso de componentes de varios desarrolladores, llega un momento que el tamaño de la aplicación crece y, sobre todo, cualquier actualización se eterniza. Todo esto, sin contar con que cada control suele incluir sistemas propios de configuración (no será la primera vez que pierdo horas buscando dónde se indica un path para, por ejemplo, añadir una colección de botones propia).

Al ver por vez primera el HTMLEditor debo reconocer que me entusiasmé, puesto que veía la gran utilidad que tenía tener englobado el control con el resto de extensores que suelo usar a menudo. Propiedades y métodos más o menos conocidos, personalización de opciones…todo con una misma “filosofía”!!!!

Este entusiasmo inicial comenzó a decaer nada más empezar a utilizarlo (igual es que nos contagiamos de los clientes y cada día nos volvemos más exigentes). Y, por supuesto, nada más empezar a utilizarlo significa hacer uso de una estructura mínima para poder hacer uso del mismo

Estructura básica para hacer uso del HTMLEditor

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"
    TagPrefix="AjaxCT" %>
    
<!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 runat="server">
    <title>HTML Editor - Pruebas iniciales</title>
    <style type="text/css" media="all">
        * {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <div>
        <h1>HTML Editor</h1>
        <AjaxCT:Editor ID="MiEditor" runat="server"  />
    </div>
    </form>
</body>
</html>

Con este código conseguimos añadir un control HTMLEditor en una de nuestras páginas. Apreciamos que no se ha cambiado un ápice de la “estructura original”, es decir, que el resultado que obtendremos también será el de una estructura básica:

image

Primeros pasos y… Primeros problemas

Una vez pasada la euforia inicial, cuando empezamos a aplicar el control en algún tipo de aplicación, comenzamos a apreciar que, en ocasiones, un control tan “extenso” puede llegar a ser demasiado para situaciones concretas. Por ejemplo, en ocasiones he contado con un espacio ínfimo para crear un control de este estilo y, en estos casos, hay que empezar a apurar botones (otra situación podría ser la de eliminar el tamaño de letra para evitar que los usuarios creen mensajes en los foros al estilo HOIGAN).

Así, de buenas a primeras, me marco dos objetivos iniciales:

  1. Aprender a personalizar el número de botones que aparecerán en las barras de herramientas del control
  2. Aprender a mostrar/ocultar estas barras de herramientas en tiempo de diseño/ejecución.

Primeras soluciones

Mirando un poco el explorador de objetos, veo que la clase AjaxControlToolkit.HTMLEditor.Editor contiene un par de métodos que me llaman la atención:

  • FillTopToolbar
  • FillBottonToolbar.

Así, en el ejemplo siguiente vamos a crear un editor que incluya, exclusivamente, los botones de formato estándar Negrita, Cursiva y Subrayado. Por tanto, empezaremos creando una nueva clase en la carpeta App_Code, la cual, heredará directamente del editor original.

using AjaxControlToolkit.HTMLEditor;

namespace jnSoftware.WebControls
{
    public class jnHTMLEditor : Editor
    {

        /// <summary>
        /// Método en el que se colocarán los elementos de la barra superior del control
        /// </summary>
        protected override void FillTopToolbar()
        {
            // Botón de negrita
            this.TopToolbar.Buttons.Add(
                new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
            // Botón de cursiva
            this.TopToolbar.Buttons.Add(
                new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
            // Botón de subrayado
            this.TopToolbar.Buttons.Add(
                new AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline());
        }


        /// <summary>
        /// Método en el que se colocarán los elementos de la barra inferior del control
        /// </summary>
        protected override void FillBottomToolbar()
        {
            // Vista Diseño
            this.BottomToolbar.Buttons.Add( 
                new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
            // Vista Previa
            this.BottomToolbar.Buttons.Add(
                new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());

            // base.FillBottomToolbar();
        }
    }
}

A partir de aquí, ya vemos que podemos empezar a personalizar la barra de herramientas, tanto superior, como inferior. De hecho, gracias al IDE de VisualStudio es realmente sencillo y cómodo añadir el resto de botones deseados.

image

 

Agregando propiedades

En alguna que otra ocasión, he hecho uso de los editores de texto mostrando u ocultando las barras de herramientas, dependiendo del contexto. Así, como lo necesito para el editor, lo que hago es crear una propiedad que permita mostrar u ocultar las barras de herramientas:

using AjaxControlToolkit.HTMLEditor;

namespace jnSoftware.WebControls
{
    public class jnHTMLEditor : Editor
    {

        /// <summary>
        /// Muestra u oculta la barra de herramientas superior
        /// </summary>
        public bool ShowTopToolBar
        {
            get { return showTopToolBar; }
            set { showTopToolBar = value; }
        }
        private bool showTopToolBar = true ;


        /// <summary>
        /// Muestra u oculta la barra de botones inferior
        /// </summary>
        public bool ShowBottonToolbar
        {
            get { return showBottomToolbar; }
            set { showBottomToolbar = value; }
        }
        private bool showBottomToolbar = true;


        /// <summary>
        /// Método en el que se colocarán los elementos de la barra superior del control
        /// </summary>
        protected override void FillTopToolbar()
        {
            if (showTopToolBar)
            {
                // Botón de negrita
                this.TopToolbar.Buttons.Add(
                    new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
                // Botón de cursiva
                this.TopToolbar.Buttons.Add(
                    new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
                // Botón de subrayado
                this.TopToolbar.Buttons.Add(
                    new AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline());
            }
        }

        /// <summary>
        /// Método en el que se colocarán los elementos de la barra inferior del control
        /// </summary>
        protected override void FillBottomToolbar()
        {
            if (ShowBottonToolbar)
            {
                // Vista Diseño
                this.BottomToolbar.Buttons.Add(
                    new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
                // Vista Previa
                this.BottomToolbar.Buttons.Add(
                    new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
            }
        }
    }
}

Una vez creada la clase, bastará con hacer alguna pequeña modificación en el fichero .ASPX para que se muestre el control creado:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Namespace="jnSoftware.WebControls" TagPrefix="jnControles" %>

<!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 runat="server">
    <title>HTML Editor - Pruebas iniciales</title>
    <style type="text/css" media="all">
        * {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server" />
    <div>
        <h1>HTML Editor</h1>
        <jnControles:jnHTMLEditor ID="MiEditor" runat="server"  />
    </div> 
    </form>
</body>
</html>

 

image

4 comentarios to “Personalizar el HTMLEditor de AjaxControlToolkit”

  1. peter said

    Oye, no puedo ver el control editor, al momento de correr el proyecto

    en diseño si lo puedo ver

  2. peter said


           
    Oye, no puedo ver el control editor, al momento de correr el proyecto
    
    en diseño si lo puedo ver

  3. alskare said

    He modificado la última parte del blog. Ahora se ve cómo se estructura el fichero .aspx para que se muestre el control

  4. Kme said

    Buenas. Quisiera saber cómo llamas a la clase que estás creando desde el archivo .cs para utilizar el nuevo editor

Sorry, the comment form is closed at this time.

 
A %d blogueros les gusta esto: