How to add custom javascript file to CKEditor 4 in Drupal?

Question

Is there a way, how to easily load JS file in CKEditor4 on Drupal 7 platform?

I would like to add some features into the editor in order to maximize user experience.

Thanks

Answer 1

To get the most out of CKEditor you need to integrate it with your theme.

First go to the 'CKEditor GLobal profile' /admin/config/content/ckeditor/editg

Make sure that your Path to 'CKEditor' is set to full-all '//cdn.ckeditor.com/4.4.3/full-all' because it contains most of the cool plugins you want to use.

Keep the rest of the defaults. Click "Update the global profile' button/

Next, go into the individual 'CKEditor profile' /admin/config/content/ckeditor/edit/Advanced (mine is called 'Advanced' yours may be different.

Expand 'Editor Appearance' accordion. Scroll down a while and you will see the 'Plugins' heading. Check mark some of those more advanced plugins. Scroll back up and Drag some of the 'Available buttons' up into the 'Current toolbar' Most of them will automatically work when you drag them up into the toolbar. It is smart enough to infer that if the button is there, you want it to load those things. But some of them require that checkbox.

the 'Advanced Content Filter' accordion is important. It is very complicated. But an important piece of functionality. It is way to complicated to talk about in this post. Google that.

Expand 'CSS' accordion. I like to set the 'Editor CSS' to use 'Use theme css' for an accurate editing experience.

Scroll down some more. Expand 'Advanced Options' set 'Load ckeditor.config.js' from the theme path' to 'Yes' to get the most control over your configuration. (You can use the "Custom JavaScript configuration" if you want).

Scroll to the bottom and click the 'Save' button.

Add a file called 'ckeditor.config.js' to your 'Theme' folder. Put your configs in there.

Mine is like this to tell your site where the path to your other config file is:

CKEDITOR.editorConfig = function(config) {
  pathToTheme = config.customConfig.substring(0, config.customConfig.lastIndexOf("/"));
  config.templates_files = [ pathToTheme + '/js/ckeditor_templates/ckeditor_templates.js' ];
  config.templates_replaceContent = false;
  config.image2_alignClasses = [ 'image_left', 'image_center', 'image_right' ];
  config.image2_captionedClass = 'image_captioned';
}

Add a file called 'ckeditor.styles.js' in your themes '/js/' folder.

Most important You have to put the word 'drupal' the argument to add your stuff. Its the only way Drupal knows where to get that stuff to load.

var stylesSet = [{name: 'Button', element: 'div', attributes: {'class': 'button'}}];

CKEDITOR.addStylesSet('drupal', stylesSet);

In the example above it will add a button under the 'Style' dropdown in your CKEditor editing interface. (it just adds a div with a class for you to style)

Clear your Drupal Cache a few times, and your browser (this stuff gets cached hard).

Take a look at your editor. You prolly have a custom style. If not, take a look at your browser console to debug.

I also add some templates in a '/js/ckeditor_templates/ folder.

CKEDITOR.addTemplates('default', {
  imagesPath: pathToTheme + '/js/ckeditor_templates/',
  templates: [
    {
      title: 'Image with text',
      image: 'imagewtext.gif',
      description: 'Could be used for staff',
      html: '<div class="imagewtext clearfix"><div class="imagewtext__image"><img src="http://placehold.it/150x200"/></div><div class="imagewtext__text"><h3 class="imagewtext__title">Name</h3><p>Position</p><br/></div></div><br/><br/>'
    }
  ]
});

Templates are very powerful. Don't forget to add the templates button in the 'Editor Appearance' accordion in your configuration.

Answer 2

The standard method to extend and customize ckeditor is using plugins and widgets (which are a special type of plugins).