README

将 CKEditor 内容模板转换为插件。

快速入门

在三个步骤中开始使用 CKEditor 模板插件。

从 Github 或通过 Composer 下载最新的 CKEditor 模板插件模块，并像往常一样启用它。

composer require outlawplz/ckeditor_template_widget

在您的 libraries/ 文件夹中定义一个 CKEditor 插件，该插件将模板转换为插件。

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

添加使用模板的内容，享受您的新内容编辑体验。

就是这样。您已经准备好开始使用 CKEditor 模板插件了。

定义 CKEditor 插件

假设您已定义了一个打印以下 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>

创建插件文件 libraries/templatewidget/plugin.js 如下。在这里，我们添加了一个名为 templatewidget 的新 CKEditor 插件。在插件内部，我们使用函数 editor.widget.add() 添加一个新的小部件；我们可以在单个插件中定义多个小部件。

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' );
      }
    } );
  }
} );

就是这样。现在我们可以在 CKEditor 中尝试使用模板，并验证小部件是否正常工作。

outlawplz / ckeditor_template_widget

维护者

详细信息

README

快速入门

定义 CKEditor 插件