mjcarrascosa.com

En la primera parte del tutorial vimos las distintas formas de configurar CKEditor. Hoy vamos a ver como configurar la barra de herramientas.

Para configurar la barra de herramientas tenemos dos formas:

• Asignar a la propiedad toolbar una definición de la barra de herramientas.
• Crear una propiedad toolbar_name con la definición de la barra de herramientas y posteriormente asignar a la propiedad toolbar el literal ‘name’.

Vamos a ver un ejemplo, con el segundo método, de creación de una barra de herramientas:

config.toolbar = 'Full';

config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Con esto definimos una barra de herramientas muy completa. Como vemos la barra de herramientas es un array donde cada elemento es o bien un array o bien el literal ‘/’. Si el elemento es un array cada elemento es un botón. Si en lugar de un array nos encontramos con el carácter ‘/’ este fuerza un salto en la barra de herramientas, es decir nos crea una nueva barra debajo de la anterior.

Dentro de la definición de cada uno de los bloques de botones podemos encontrar el identificador de cada uno de los botones o el carácter ‘-’ que nos crea un espacio en blanco.

La definición de la barra de herramientas debe ir en el archivo de configuración, o bien en el por defecto o en uno propio, explicado en el artículo anterior.

Podemos si lo queremos crear la barra de herramientas al crear la instancia de esta forma:

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

Como se puede ver es bastante sencillo configurar la barra de herramientas a nuestro gusto. Si teneis alguna duda intentaré resolverla en los comentarios.

Artículos relacionados:

• 16/11/2009 -- Tutorial de CKEditor. Parte I.
• 27/07/2009 -- Tutorial de FCKeditor. Parte I.
• 10/06/2009 -- Tutorial de TinyMCE. Parte I
• 03/12/2009 -- Tutorial de CKEditor. Parte III.
• 30/09/2009 -- Probando CKEditor

Compárte esta entrada:

Hace ya bastante tiempo se comenzó en este blog un tutorial sobre FCKEditor, uno de los muchos editores WYSIWYG que hay, pero se dejó abandonado. Varias fueron las razones, principalmente la falta de tiempo y la salida de CKEditor.

Después de un tiempo en el tintero, y gracias a un comentario de un lector, me he decidido a comenzar un tutorial introductorio a CKEditor. Puede servirnos como introducción el artículo “Probando CKEditor” donde se da un vistazo rápido a esta herramienta.

Lo primero que vamos a ver es como configurar nuestro editor. Para ello tenemos tres opciones:

• Definir la configuración al crear el editor.
• Usar el archivo config.js para colocar la configuración en este.
• Crear nuestro propio archivo de configuración.

Definir la configuración al crear el editor:

Cuando creamos una instancia del editor con el método replace podemos indicarle la configuración de este. De esta forma nos evitamos tener que tocar la instalación del editor. Veamos como se haría:

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

Hay que tener en cuenta que lo que se pasa a la función es la definición literal de un objeto, por lo que tendremos que usar la sintaxis parametro : valor, y tener cuidado de no usar el símbolo “igual que” (=).

Usar el archivo config.js para colocar la configuración:

Si editamos el archivo config.js, en la misma carpeta donde está ckeditor.js, veremos que hay una función llamada CKEDITOR.editorConfig. Dentro de esta tendremos que colocar los valores de configuración que deseemos.

CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

Definir la configuración en nuestro propio archivo:

En este caso nos crearemos un archivo donde colocaremos la configuración. De esta forma no tenemos que modificar la instalación de CKEditor y támpoco tendremos que tocar nuestras páginas, tan solo el archivo de configuración. Dentro de él definiremos la función CKEDITOR.editorConfig, podemos por ejemplo copiar el config.js como base, y luego indicaremos al editor donde se encuentra este archivo de la siguiente manera:

CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

Conclusiones:

Como hemos podido ver el editor nos ofrece varias formas para configurarlo, dependiendo de nuestras necesidades o nuestros gustos. Personalmente me gusta más la tercera, aunque cada cual es libre de hacerlo a su manera.

Espero que esta primera parte les haya sido de ayuda pues esta es la base para customizar nuestro editor. Hasta la próxima entrega del tutorial, que espero pueda tenerla lista para el miércoles.

Artículos relacionados:

• 18/11/2009 -- Tutorial de CKEditor. Parte II.
• 27/07/2009 -- Tutorial de FCKeditor. Parte I.
• 10/06/2009 -- Tutorial de TinyMCE. Parte I
• 03/12/2009 -- Tutorial de CKEditor. Parte III.
• 30/09/2009 -- Probando CKEditor

Compárte esta entrada:

Via anieto2k me encuentro con una presentación de Thomas Fuch, creador de Script.aculo.ous, llamada “Extreme JavaScript Performance”, donde da una serie de recomendaciones, que podemos y que no debemos,  para mejorar el rendimiento de nuestros scripts.

En la presentación se comparan los tiempos que se tarda, en distintos navegadores, en realizar diversas tareas comunes. También se presentan algunas curiosidades del lenguaje, como la evaluación de los operadores && (AND) y || (OR).  Una lectura más que recomendada para mejorar el tiempo de ejecución de los scripts.

Artículos relacionados:

• 09/09/2009 -- InnerHTML contra DOM. ¿Cuál se ejecuta más rápido?
• 11/03/2010 -- Como utilizar Lightbox 2
• 01/12/2009 -- Introducción a CKFinder
• 26/11/2009 -- Listando los métodos y propiedades de un objeto en JavaScript
• 18/11/2009 -- Tutorial de CKEditor. Parte II.

Compárte esta entrada:

En el anterior artículo vimos como parametrizar una consulta SQL usando el cierre de interrogante. En este vamos a usar el símbolo de dos puntos (:) seguido del nombre del parámetro para indicar estos. Al igual que en la entrada anterior vamos a ver primero el código y después una explicación del mismo:

<?php

function escapar($valor)
{
  // Retornamos la cadena escapada. Está solo como ejemplo.
  return mysql_escape_string($valor);
}

function prepararParametro($param)
{

  if(is_string($param))
  {
    // Si el parámetro es una cadena retornamos el valor
    // de la cadena escapado entre ' '.
    return "'".escapar($param)."'";
  }
  else if(is_array($param))
  {
    // Si es un array devolvemos una lista de los parametros
    // separados por comas. Cada elemento del array es procesado
    // por esta función para que tenga el formato correcto.
    $retorno = '';
    foreach($param as $p)
    {
      // Cuando retorno es vacio ('') quiere decir que no
      // Tenemos que añadir la coma.
      if($retorno == '')
      {
        $retorno .= prepararParametro($p);
      }
      else
      {
        $retorno .= ','.prepararParametro($p);
      }
    }

    return $retorno;
  }
  else if($param == NULL)
  {
    // Si es NULL devolvemos la cadena 'NULL'
    return 'NULL';
  }
  else
  {
    // Devolvemos el parametro.
    return $param;
  }
}

function prepararConsulta($consulta, $parametros = array())
{
  // Recorremos los parametros
  foreach($parametros as $nombre => $parametro)
  {
    // Juntamos cada parte con el parametro correspondiente preparado.
    $consulta = str_replace(":".$nombre, prepararParametro($parametro), $consulta);
  }

  // Devolvemos la consulta preparada
  return $consulta;
}
?>

Volvemos a tener las funciones escapar y prepararParametro, que funcionan exactamente igual que en la versión del interrogante (?). La novedad viene ahora en la función prepararConsulta, que se ha simplificado bastante. Ahora lo que hacemos es recorrer el array de parámetros con un bucle foreach, almacenando en la variable $nombre el nombre del párametro y en la variable $parametro el valor de este. Luego con la función str_replace reemplazamos las apariciones de :nombre por el parámetro preparado. Bastante sencillo.

Ahora, cuando llamemos a la función prepararConsulta, tendremos que pasarle un array con los valores indexados mediante un literal. Por ejemplo:

$parametros = array('user_id' => 'manuel', 'user_password => 'password');
$consultaPreparada = prepararConsulta($consulta, $parametros);

De nuevo, como en el artículo anterior, la función es mejorable pero es una buena aproximación al problema de las consultas parametrizadas.

Artículos relacionados:

• 23/09/2009 -- Consultas parametrizadas en PHP. Parte II.
• 10/09/2009 -- Consultas parametrizadas en PHP. Parte I.
• 26/02/2010 -- Tutorial de ADOdb: Parte II
• 02/02/2010 -- Tutorial de ADOdb: parte I
• 29/08/2009 -- Backup2Mail: creando copias de seguridad de nuestras bases de datos

Compárte esta entrada:

Hace no mucho hablaba en este blog del plugin Facebook Connect para WordPress. Lo tuve activo en el blog durante un tiempo, pero me daba algunos problemas al entrar al administrador cuando estaba también en Facebook, por lo que al final he decidido desactivarlo. Aunque la funcionalidad es interesante tampoco es imprescindible.

Artículos relacionados:

• 29/06/2009 -- Facebook Connect para WordPress
• 01/12/2009 -- Pretty Comments: enriqueciendo el texto de los comentarios
• 20/11/2009 -- Evitar el SPAM en el blog
• 17/09/2009 -- Votando las entradas del blog con WP-PostRating
• 01/07/2009 -- Algunos plugins bastante útiles para WordPress

Compárte esta entrada: