Configuración

Image Crop para el CKEditor

Configuración

La configuración se realiza en el objeto "imagecrop". Por ejemplo:

// Configuration for ImageCrop
config.imagecrop = {
      cropsizes : [
            {width:120, height:120, title:"120px square", name:"Thumbnail"},
            {width:400, height:300, title:"400 * 300", name:"Content picture"},
            {width:960, height:350, title:"960 * 350", name:"Big header"},
            {width:0, height:0, title:"No restrictions", name:"Free crop"}
            ],
      formats : [
            { title:"JPG - Low quality", value:"jpg60"},
            { title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
            { title:"JPG - High quality", value:"jpg90"},
            { title:"PNG (for texts)", value:"png"}
            ],
      maximumDimensions : {width:1024, height:1024}
};

La propiedad "cropsizes" define las opciones de los rectángulos de recorte que aparecerán.
Cada opción es un elemento del array y tiene 4 propiedades:

  • "width"
  • "height"
  • "title"
  • "name"

Anchura del área de recorte
Altura del área de recorte
Tooltip del botón de recorte
Texto del botón de recorte

Puede crear tantas opciones (Botones) de recorte como desee.
Si quiere crear una opción "Libre", dimensionable por el usuario, ponga cero en "width" y "height".

Después de recortar la imagen, el usuario puede seleccionar el formato y el grado de compresión en el formato jpg uese usará para crear el fichero. Estas opciones se detallan en la propiedad "formats".

formats : [
      { title:"JPG - Low quality", value:"jpg60"},
      { title:"JPG - Normal quality", value:"jpg80", attributes:"selected"},
      { title:"JPG - High quality", value:"jpg90"},
      { title:"PNG (for texts)", value:"png"}
      ],

En la configuración de Image Crop peude cambiar la opción por defecto o suprimir las opciones que no le interesen.

Si el usuario pulsa "Aceptar" para guardar la imagen sin haber recortado la misma, esta se escala y se guarda con unas dimensiones máximas. Estas dimensiones máximas se definen en la propiedad "maximumDimensions":

maximumDimensions : {width:1024, height:1024}

Si no se incluye esta línea de configuración, el programa guardará la imagen con sus dimensiones originales.

Primera prueba

Vacíe su caché y recargue la página de su editor.

Añada una imagen (arrastrela sobre el editor, haga una captura de pantalla y péguela, use el icono Imagen del CKEditor, ...) y el diálogo para recortar la imagen aparecerá:

  • Si pulda "Aceptar" su imagen será añadida tal y como está
  • Si pulsa una opción de recortar, el rectángulo de recortar aparecerá. Podrá hacer zoom sobre la imagen, escalar el rectángulo y moverlo para elegir lo que le interesa
  • Haga clic en "Recortar" y podrá elegir el formato y el nivel de compresión (en jpg) para guardar la imagen

Si tiene alguna pregunta, por favor contacte con nosotros.