As already discussed in a previous blog post, CKEditor is a very useful module for creating and editing content. In my work editing content, I found the need to occasionally change the font size and type to avoid using css.

Here I will explain how to extend the CKEditor module using the CKEditor_font module, using composer, bower and gulp.

In our terminal, use the following command to download the most stable version of the module:

$ composer require drupal/ckeditor_font:~1

Then, enable the module on our website with Drush:

$ drush en ckeditor_font -y

Use a bower.json file, add the main CKEditor project in its latest version:

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

If you set up a base directory inside the file .bowerrc.json you have have to use it as the basis of gulpfile.js file and add the following code:

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}));
});

After running the command gulp, we can see the following in our 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

On the path config/content/formats in our site, we set up to Full HTML and Basic HTML new plugins font and size, then appear the icons represented by a letter F and S in the list of available buttons and then add the formatting group.

And now everything is ready! Now we can manipulate the styles of font type and size of our content.