¿Cómo agregar tamaño y tipo de fuente a CKEditor?

Publicado por Charlotte León el 4 de Noviembre de 2016

Como ya se ha hablado en un blog anterior CKEditor es un módulo muy útil para creación y edición de contenido. En mi trabajo de edición de cierto contenido me encontré con la necesidad de modificar el tamaño y tipo de fuente evitando usar css.

A continuación les explicaré cómo extender el módulo CKEditor utilizando el módulo CKEditor_font, haciendo uso de composer, bower y gulp.

En su terminal utilice el siguiente comando para descargar la versión más estable del módulo:

$ composer require drupal/ckeditor_font:~1

A continuación habilitamos el módulo en nuestro sitio con  Drush:

$ drush en ckeditor_font -y

Comprobamos que dentro del archivo bower.json se encuentre nuestro módulo principal CKEditor en su versión más reciente:

{
  "name": "example_custom_theme",
  "description": "Theme for Example Custom",
  "main": "gulpfile.js",
  "devDependencies": {
    ""ckeditor": "^4.5.11"
  }
}

Si se ha configurado un directorio base dentro del archivo .bowerrc.json tendremos que utilizarlo como base del archivo gulpfile.js y se agregará el siguiente código:

var gulp         = require('gulp');
var bower        = require('gulp-bower');
var runSequence  = require('run-sequence');
var clean        = require('gulp-clean');

//Base repository bower
var bowerComponents = '../../../../bower_components';
//Path to library font (needed to CKEditor font)
var assetLibraries = '../../../libraries';

gulp.task('bower', function(callback) {
  runSequence(
    'run-bower',
    ['clean-libraries'],
    ['font'],
    callback
  );
});

gulp.task('run-bower', function() {
  return bower(bowerComponents);
});

// Move around some files from the bower folder into proper destinations.
gulp.task('font', function() {
  return gulp.src(bowerComponents + '/ckeditor/plugins/font/**/*.*', { base: bowerComponents + '/ckeditor/plugins/' })
    .pipe(gulp.dest(assetLibraries));
});

// Clean destinations.
gulp.task('clean-libraries', function() {
  return gulp.src(assetLibraries, {read: false})
    .pipe(clean({force: true}));
});

Luego de ejecutar el comando gulp, podremos observar lo siguiente en nuestra terminal: 

[16:37:40] Starting 'bower'...
[16:37:40] Starting 'run-bower'...
[16:37:40] Using cwd: /example/web/themes/custom/example_theme
[16:37:40] Using bower dir: ../../../../bower_components
[16:38:03] Finished 'run-bower' after 22 s
[16:38:03] Starting 'clean-libraries'...
[16:38:03] Finished 'clean-libraries' after 812 ms
[16:38:03] Starting 'font'...
[16:38:17] Finished 'font' after 14 s

En la  ruta config/content/formats de nuestro sitio, configuramos para Full HTML y Basic HTML los nuevos plugins de fuente y tamaño, a continuación aparecerán los iconos representados por una letra F y S en la lista de botones disponibles y luego los añadimos al grupo Formatting.

¡Y listo! Ahora podremos manipular los estilos de tipo de fuente y tamaño de nuestro contenido. 

 

¿Está buscando construir o personalizar un sitio de Drupal? Escríbanos sobre su proyecto y nos pondremos en contacto con usted dentro de 48 horas.

Si desea obtener más información sobre por qué Drupal es el sistema de gestión de contenido de código abierto más utilizado en el mundo, visite drupal.org/about.