outlawplz/ckeditor_template_widget

This package is abandoned and no longer maintained. No replacement package was suggested.

CKEditor plugins that convert Content Templates into Widgets for Drupal 8.

v0.1.0 2017-03-13 13:58 UTC

GPL-3.0

• Matteo Palazzo

README

Convert CKEditor Content Templates into Widgets.

Quick start

Start using CKEditor Template Widget in three steps.

1. Download latest CKEditor Template Widget module from Github or via Composer and enable it as usual.

composer require outlawplz/ckeditor_template_widget

1. Define a CKEditor plugin in your libraries/ folder that converts a template into a widget.

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

1. Add a content that uses a template and enjoy your new content editor experience.

That's it. You're all set to start using CKEditor Template Widget.

Define CKEditor Plugin

Suppose you have defined a template that prints the following HTML.

<div class="lt-50 clearfix">
  <div class="lt-50__clm lt-50__clm--left">
    <p>Your content...</p>
  </div>
  <div class="lt-50__clm lt-50__clm--right">
    <p>Your content...</p>
  </div>
</div>

Create the plug-in file libraries/templatewidget/plugin.js as follow. Here we're adding a new CKEditor plug-in called templatewidget. Inside the plug-in we add a new widget using the function editor.widget.add(); we can define multiple widgets in a single plug-in.

CKEDITOR.plugins.add( 'templatewidget', {

  requires: 'widget,templates',

  init: function ( editor ) {

    editor.widgets.add( 'lt_50', { // Define a new widget.

      editables: { // Define editable parts.
        left: {
          selector: '.lt-50__clm--left'
        },
        right: {
          selector: '.lt-50__clm--right'
        }
      },
      upcast: function( element ) { // Convert the template into a widget.
        return element.name == 'div' && element.hasClass( 'lt-50' );
      }
    } );
  }
} );

That's it. Now we can try to use the template in CKEditor, and verify that the widget is working.