How to add size and font family to CKEditor?

Posted by Charlotte León on November 4, 2016
Development
Strategy & Architecture

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.

Are you looking to build or customize a Drupal site? Write us about your project, and we’ll get back to you within 48 hours.

If you want to learn more about why Drupal is the most widely used open-source content management system in the world, visit drupal.org/about.


How to add size and font family to CKEditor?