从外部加载项添加CKEditor小部件(脚注)

Question

我想将CKEditor脚注添加到Drupal 8工具栏中。

插件似乎是加载的，因为我可以在配置输入格式时添加按钮，并且我看到CKEDITOR.plugins.externals.footnotes已经定义并指向我的插件文件。但是，该按钮不会显示在工具栏中。控制台中没有错误或警告。

这是我的/modules/custom/ckeditorfootnotes/src/Plugin/CKEditorPlugin/CKEditorFootnotes.php

class CKEditorFootnotes extends CKEditorPluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getFile().
   */
  function getFile() {
    return drupal_get_path('module', 'ckeditorfootnotes') . '/js/footnotes/plugin.js';
  }

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
   */
  function getButtons() {
    return array(
      'CKEditorFootnotes' => array(
        'label' => t('Footnotes'),
        'image' => drupal_get_path('module', 'ckeditorfootnotes') . '/js/footnotes/icons/footnotes.png'
      )
    );
  }

我是filter.format.basic_html

    uuid: b47ec9da-02dc-420c-8100-c2127d8e5012
    langcode: ca
    status: true
    dependencies:
      module:
        - editor
    name: 'HTML bàsic'
    format: basic_html
    weight: 0
    filters:
      filter_html:
        id: filter_html
        provider: filter
        status: false
        weight: -10
        settings:
          allowed_html: '<a href hreflang target> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p> <br> <span> <img src alt height width data-entity-type data-entity-uuid data-align data-caption> <s> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr> <sub> <sup> <section>'
          filter_html_help: false
          filter_html_nofollow: false
      filter_align:
        id: filter_align
        provider: filter
        status: true
        weight: 7
        settings: {  }
      filter_caption:
        id: filter_caption
        provider: filter
        status: true
        weight: 8
        settings: {  }
      filter_html_image_secure:
        id: filter_html_image_secure
        provider: filter
        status: true
        weight: 9
        settings: {  }
      editor_file_reference:
        id: editor_file_reference
        provider: editor
        status: true
        weight: 11
        settings: {  }

最后是editor.editor.basic_html

uuid: 175d53b1-06a9-4aca-9755-85595f23633b
langcode: ca
status: true
dependencies:
  config:
    - filter.format.basic_html
  module:
    - ckeditor
    - editor_file
third_party_settings:
  editor_file:
    status: true
    scheme: public
    directory: inline-files
    extensions: txt
format: basic_html
editor: ckeditor
settings:
  toolbar:
    rows:
      -
        -
          [... several groups ...]
        -
          name: Media
          items:
            - CKEditorFootnotes
            - DrupalFile
            - Blockquote
            - DrupalImage
            - Table
        -
          [... more groups ...]
  plugins:
    stylescombo:
      styles: ''
image_upload:
  status: true
  scheme: public
  directory: inline-images
  max_size: ''
  max_dimensions:
    width: null
    height: null

Answer 1

结果，您需要调用editor.ui.addButton()才能显示按钮。

在我看来，在普通的CKEditor开发中通常不需要它，因为它既没有包含在教程中，也没有包含在ckeditor脚注插件中。但是，大多数当前的Drupal 8 CKEditor模块都将其包含在插件源代码中。

对于simplebox插件，它将如下所示，这里command是定义的小部件的名称。

editor.ui.addButton('SimpleBox', {
    label: Drupal.t('SimpleBox'),
    command: 'simplebox',
    icon: this.path + 'icons/simplebox.png'
});