outlawplz/ckeditor_templates

This plugin provides a dialog to offer predefined content templates - with page layout, text formatting and styles.

CKEditor Templates

Drupal 8 custom module that implements Templates plugin in CKEditor., _(*1)

Quick start

Start using CKEditor Templates in three steps., _(*2)

1. Download latest CKEditor Templates module from Github or via Composer and enable it as usual., _(*3)

   composer require outlawplz/ckeditor_templates
   

2. Download the CKEditor Templates plug-in and copy it to the libraries/ folder found at Drupal root folder., _(*4)

# Plug-in location
/libraries/templates/plugin.js

1. Edit a text format that uses CKEditor, and enable the Templates plug-in dragging the icon from Available buttons to Active toolbar.

That's it. You're all set to start using CKEditor Templates., _(*5)

Options

Once the plug-in is enabled, you can specify where to find your templates file editing the plug-in settings. Available options are Name, Path and Replace content., _(*6)

• Name: The name of your templates set. In the example below the templates name is custom., _(*7)

• Path: The path to your template file. In the example below the path is /libraries/custom_templates/custom.templates.js., _(*8)

• Replace content: When inserting a template the content should be replaced or not by default., _(*9)

Templates definition

Templates are defined in JS files. Save your templates file in /libraries folder or /sites/default/files folder. In this example the file will be created into /libraries/custom_templates folder., _(*10)

// The name of templates set is 'custom'.
CKEDITOR.addTemplates( 'custom', {

  // Path to the subfolder that contains the preview images.
  imagesPath: '/libraries/custom_templates/images/',

  // Template definition.
  templates: [
    {
      title: 'Custom template',
      image: 'custom.gif',
      description: 'Description of my custom template.',
      html:
        '

Custom Template

' +
        '

Your text..., (*11)

'
    },
    {
      title: 'Custom template with image',
      image: 'custom_image.gif',
      description: 'Description of my custom template with image.',
      html:
        '

Custom Template with Image

' +
        '

, (*12)

',
        '

Your text..., (*13)

'
    }
  ]
} );