This video returns to the CKEditor configuration page for the final section. In it you will learn how to ensure that pasted text is cleaned of unwanted formatting, how to enable “Spell check as you type”, and how to configure what options are available in the “Font” and “Size” dropdowns.

Now that we have IMCE installed and configured, let’s head back to the CKEditor settings.

  • Go to “Configuration => Content authoring => CKEditor”
  • Click “edit” next to the “Advanced” profile

Force pasting as plain text

Enabling this option can save you a lot of time and headache. I’ll give you example of how it works.

  • With the setting disabled, I’ll copy some text from the page: http://modulesunraveled.com/drush
  • Then I’ll paste that text into the wysiwyg field

You’ll notice that the formatting is intact, the colors are the same, etc. If we click the “Switch to plain text editor” link, we’ll see all of the extra code that is transferred. This is a hassle because when you preview the post, or save it, that formatting is still there. You’re site’s CSS will not take over and format the text appropriately, which can clutter your site.

One way to alleviate that confusion is to enable the “Force pasting as plain text” setting.

  • With the setting enabled, I’ll refresh the create article page and copy and paste the same text into the wysiwyg field

This time, you’ll notice that the text is simply plain text, and can then be formatted in accordance with what the site allows. And if we switch to the plain text editor, the code is much more friendly.

HTML Entities

With this option set to “Yes”, applicable characters will be converted to HTML entities. For example, the double quote (“) will be converted to “"”.

With this option set to “No”, characters will not be converted to HTML entities.

Spellchecker

The spellchecker is disabled by default. So, If I misspell a word in the wysiwyg editor, like “allways”, there isn’t anything to notify me of the misspelling. When the spellchecker is set to “Yes”, and I type “allways”, you’ll see the standard red squiggly line under the misspelled word.

Load ckeditor.config.js from the theme path

By default, the config file is loaded from the CKEditor module directory. If you’d like to use a custom config.js file, you can place that in your theme directory and set this option to “Yes”.

Custom JavaScript configuration

This is where you can make configuration changes specific to this CKEditor profile. (If you’d like to make them globally, edit the ckeditor.config.js file, or make a copy and place it in your theme directory, and enable the previous option.)

The examples given affect the “Font” and “Size” dropdowns. Let’s add both buttons, and then try the examples. (You’ll also need to have configured the text format to allow the “span” tag using HTML Purifier like we did in an earlier video. If you experience issues getting the “Font”, “Font Size” etc. buttons to work, refer to the HTML Purifier setup video.)

  • In the “Editor Appearance” section, drag the “Font” and “Size” buttons to the “Used buttons” toolbar.
  • Click “Save” to see the buttons before we make our custom changes

Now, when we go to our create article page, we can choose one of the fonts from the dropdown, as well as a different font size.

Now, if we paste the examples from the help text into the “Custom JavaScript configuration” field, we’ll see the options change to only display those. (The fonts are in the format “[What is displayed]/[font size]”

  • config.font_names = 'Arial;Times New Roman;Verdana';
    config.fontSize_sizes = '16/16px;24/24px;48/48px;';