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.