Custom Templates in CKEditor

12 Jan

Custom Templates in CKEditor

by Ionut Alexuc
In order to insert a custom template in CKEditor the first step you will need to take is download the plugin from
 
 
Place the downloaded plugin in sites/all/modules/ckeditor/plugins and add
config.extraPlugins = 'templates';
to your ckeditor configuration file. 
 
Enable the new added plugin from the plugin list on your ckeditor profile.
 
Copy ckeditor.config.js from the ckeditor module to your Drupal theme folder (sites/all/themes/THEME_NAME/).
 
Add the following line to the configuration file
config.templates_files = [ Drupal.settings.basePath + 'sites/all/themes/THEME_NAME/js/ckeditor.custom.templates.js' ];
 
Create a file called ckeditor.custom.templates.js in the folder sites/all/themes/THEME_NAME/js/ and add the following code in it:
 
CKEDITOR.addTemplates( 'default',
 
  {
    imagesPath: CKEDITOR_BASEPATH + '../../themes/THEME_NAME/ckeditor-tpl/' ,
    templates :
      [
        {
          title: 'Your title',
          image: 'img.png',
          description: 'Your custom template.',
          html: '<h1>Hello world!</h1>'
        },
      ]
  });
 
Create a folder called ckeditor-tpl in your theme folder and place the img file.