Image Toolbar para el CKEditor

Configuración

La configuración está definida en el objeto "imagetoolbar" y tiene 2 elementos.

El primer elemento es el conjunto de botones que estarán disponibles en la barra de herramientas. Está definica como un array (toolbar) de arrays (groups). Estos grupos de arrays incluyen cada elemento del toolbar que ud. quiera proveer.

Un elemento del toolbar está definida por varias propiedades:

  • El nombre
  • La clase que quiere aplicar a la imagen
  • El título que se mostrará como tooltip
  • Una entrada opcional para definirlo como justifyCommand de manera que cambie al correspondiente comando de justificación en la barra principal
  • Un icono opcional con el path del icono que desea usar. Si está creando este plugin en su CKEditor, puede colocar todos sus iconos en el subdirectorio /icons/ de este plugin (en formato png) y llamar a cada icono con el mismo nombre usado en el "name" de este elemento
  • Una entrada opcional dontCheck para indicar que este este elemento tiene que mostrarse siempre, sin necesidad de comprobar la hoja de estilos actual
// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.classes = [
    [
        { name: 'imageleft', 'class':'izda', title:'A la izquierda', justifyCommand:'justifyleft' },
        { name: 'imagecenter', 'class':'centro', title:'Centrada', justifyCommand:'justifycenter' },
        { name: 'imageright', 'class':'dcha', title:'A la derecha', justifyCommand:'justifyright' },
        { name: 'imageinside', 'class':'inline', title:'En linea', justifyCommand:'justifynone' }
    ],
    [
        { name: 'imageborder', 'class':'borde', title:'Con Borde' }
    ],
    [
        { name: 'imageshadow', 'class':'sombra', title:'Con Sombra' }
    ],
    [
        { name: 'nomobile', 'class':'no-mobile', title:'No Mostrar en móvil' }
    ]
];

Cada grupo de elementos actúa como un conjunto de "radio buttons": cuando hace clic en uno, el resto de los elementos se desactivan, sin afectar al estado del resto de los grupos.

El usuario puede hacer clic en un botón de cada grupo: de esta forma, a la imagen se le aplicarán varias clases.

El segundo elemento de la configuración es el conjunto de los elementos del toolbar que se desean usar. Por defecto, la barra de el toolbar se genera automáticamente basado en las clases que Ud. ha definido; pero si deseea agregar más elementos para aplicar otro tipo de estilos, esta entrada es para ello. Este elemento sigue la misma estructura que el toolbar del CKEditor:

// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.toolbar = [['imageleft','imagecenter','imageright'],['Image', 'ImageCrop']];

Antes de mostrar los elementos en la barra, el programa comprueba si dichos elementos están definidos en la hoja de estilos. Es decir, puede añadir a la barra tantos elementos como quierar y controlar si se mostrarán o no en función de que su clase aparezca o no en la hoja de estilos. De esta forma, puede reutilizar su barra en diferentes tipos de documentos (portada, noticias, mailings, etc.). Si desea que algún icono se muestre siempre, independientemente de que su clase exista en la hoja de estilos, ponga establezca la propiedad "dontCheck: true".

Recuerde que tiene que añadir sus clases a su hoja de estilos; estas son las que hemos usado en nuestro ejemplo (pero ud. puede usar las clases que necesite, no hay restricciones):

img.izda {
    float: left;
    margin: 0 7px 3px 0;
}

img.dcha {
    float: right;
    margin: 0 0 3px 7px;
}

img.centro {
    display: block;
    margin: 0 auto 3px;
}

.borde {
    border: 1px solid #666;
}

.sombra {
    box-shadow: 2px 2px 6px 3px #cbcbcb;
}

.rounded {
    border-radius:10px;
}

.ellipse {
    border-radius:50%;
}

Como puede ver, puede usar img.class o .class indistíntamente.

Puede que le resulte útil leer lo siguiente: Styling images with Classes in CKEditor.

Si tiene alguna pregunta, por favor contacte con nosotros.