如何将工具栏添加到自定义 ckeditor 4 对话框

Question

我有一个自定义的 CKEditor 按钮可以打开一个对话框。在对话框中，我有一个文本区域类型，我希望它有“斜体”和“粗体”按钮，让用户可以在脚注文本中设置粗体和斜体文本。如何将斜体和粗体添加到文本区域？

我希望它具有类似于以下示例的内容（我找到了这个示例 here）：

plugin.js 文件

KEDITOR.plugins.add("footnotes", {
  requires: ["fakeobjects", "dialog"],
  icons: "footnotes",
  onLoad() {
    const iconPath = `${window.location.origin + this.path}icons/fn_icon2.png`;
    CKEDITOR.addCss(
      `${".cke_footnote{background-image: url("}${CKEDITOR.getUrl(
        iconPath
      )});` +
        `background - position: center center;` +
        `background - repeat: no - repeat;` +
        `width: 16px;` +
        `height: 16px;` +
        `}`
    );
  },
  init(editor) {
    editor.addCommand(
      "createfootnotes",
      new CKEDITOR.dialogCommand("createfootnotes", {
        allowedContent: "fn[value]"
      })
    );
    editor.addCommand(
      "editfootnotes",
      new CKEDITOR.dialogCommand("editfootnotes", {
        allowedContent: "fn[value]"
      })
    );

    // Drupal Wysiwyg requirement: The first argument to editor.ui.addButton()
    // must be equal to the key used in $plugins[<pluginName>]['buttons'][<key>]
    // in hook_wysiwyg_plugin().
    if (editor.ui.addButton) {
      editor.ui.addButton("footnotes", {
        label: Drupal.t("Add a footnote"),
        command: "createfootnotes",
        icon: "footnotes"
      });
    }

    if (editor.addMenuItems) {
      editor.addMenuGroup("footnotes", 100);
      editor.addMenuItems({
        footnotes: {
          label: Drupal.t("Edit footnote"),
          command: "editfootnotes",
          icon: "footnotes",
          group: "footnotes"
        }
      });
    }
    if (editor.contextMenu) {
      editor.contextMenu.addListener(element => {
        if (!element || element.data("cke-real-element-type") !== "fn") {
          return null;
        }
        return { footnotes: CKEDITOR.TRISTATE_ON };
      });
    }

    editor.on("doubleclick", evt => {
      if (CKEDITOR.plugins.footnotes.getSelectedFootnote(editor)) {
        evt.data.dialog = "editfootnotes";
      }
    });

    CKEDITOR.dialog.add("createfootnotes", `${this.path}dialogs/footnotes.js`);
    CKEDITOR.dialog.add("editfootnotes", `${this.path}dialogs/footnotes.js`);
  },
  afterInit(editor) {
    const { dataProcessor } = editor;
    const { dataFilter } = dataProcessor;

    if (dataFilter) {
      dataFilter.addRules({
        elements: {
          fn(element) {
            return editor.createFakeParserElement(
              element,
              "cke_footnote",
              "hiddenfield",
              false
            );
          }
        }
      });
    }
  }
});

CKEDITOR.plugins.footnotes = {
  createFootnote(editor, origElement,type, text, value) {
    let realElement;
    if (!origElement) {
      realElement = CKEDITOR.dom.element.createFromHtml("<fn></fn>");
    } else {
      realElement = origElement;
    }

    if (text && text.length > 0) {
      realElement.setHtml(text);
    }
    if (value && value.length > 0) {
      realElement.setAttribute("value", value);
    }
    console.log(type);

    if (type && type.length > 0) {
      realElement.setAttribute("type", type);
    }
    const fakeElement = editor.createFakeElement(
      realElement,
      "cke_footnote",
      "hiddenfield",
      false
    );
    editor.insertElement(fakeElement);
  },

  getSelectedFootnote(editor) {
    const selection = editor.getSelection();
    const element = selection.getSelectedElement();
    const seltype = selection.getType();

    if (
      seltype === CKEDITOR.SELECTION_ELEMENT &&
      element.data("cke-real-element-type") === "hiddenfield"
    ) {
      return element;
    }
  }
};

和 fotenote.js 文件

/**
 * @file
 */

function footnotesDialog(editor, isEdit) {
  return {
    title: Drupal.t("Footnotes Dialog"),
    minWidth: 500,
    minHeight: 50,
    contents: [
      {
        id: "info",
        label: Drupal.t("Add a footnote"),
        title: Drupal.t("Add a footnote"),
        elements: [
          {
            id: "type",
            type: "select",
            items: [ [ 'Footnote' ], [ 'Reference' ], [ 'TableNote' ] ],
            label: Drupal.t("Type"),
            setup(element) {
              if (isEdit) {
                console.log(element.getAttribute("type"));
                this.setValue(element.getAttribute("type"));
              }
            }
          },
          {
            id: "footnote",
            type: "textarea",
            label: Drupal.t("Footnote text :"),
            setup(element) {
              if (isEdit) {
                this.setValue(element.getHtml());
              }
            }
          },
          {
            id: "value",
            type: "text",
            label: Drupal.t("Value :"),
            setup(element) {
              if (isEdit) {
                this.setValue(element.getAttribute("value"));
              }
            }
          }
        ]
      }
    ],
    onShow() {
      if (isEdit) {
        this.fakeObj = CKEDITOR.plugins.footnotes.getSelectedFootnote(editor);
        this.realObj = editor.restoreRealElement(this.fakeObj);
      }
      this.setupContent(this.realObj);
    },
    onOk() {
      CKEDITOR.plugins.footnotes.createFootnote(
        editor,
        this.realObj,
        this.getValueOf("info", "type"),
        this.getValueOf("info", "footnote"),
        this.getValueOf("info", "value")
      );
      delete this.fakeObj;
      delete this.realObj;
    }
  };
}

CKEDITOR.dialog.add("createfootnotes", editor => footnotesDialog(editor));
CKEDITOR.dialog.add("editfootnotes", editor => footnotesDialog(editor, 1));

Answer 1

只是为了存档，也许其他人需要类似的东西

/**
 * @file
 */

function footnotesDialog(editor, isEdit) {
  return {
    title: Drupal.t("Footnotes Dialog"),
    minWidth: 500,
    minHeight: 50,
    contents: [
      {
        id: "info",
        label: Drupal.t("Add a footnote"),
        title: Drupal.t("Add a footnote"),
        elements: [
          {
            id: "type",
            type: "select",
            items: [['Footnote'], ['Reference'], ['TableNote']],
            default: ['Footnote'],
            label: Drupal.t("Type"),
            setup(element) {
              if (isEdit) {
                console.log(element.getAttribute("type"));
                this.setValue(element.getAttribute("type"));
              }
            }
          },
          {
            id: "footnote",
            type: "textarea",
            class: 'footnote_text',
            label: Drupal.t("Footnote text :"),
            setup(element) {
              if (isEdit) {
                this.setValue(element.getHtml());
              }
            }
          },
          {
            id: "value",
            type: "text",
            label: Drupal.t("Value (index) :"),
            setup(element) {
              if (isEdit) {
                this.setValue(element.getAttribute("value"));
              }
            }
          }
        ]
      }
    ],
    onShow() {
      if (isEdit) {
        this.fakeObj = CKEDITOR.plugins.footnotes.getSelectedFootnote(editor);
        this.realObj = editor.restoreRealElement(this.fakeObj);
      }
      this.setupContent(this.realObj);
      var dialog = this;
      CKEDITOR.on('instanceLoaded', function (evt) {
        dialog.editor_name = evt.editor.name;
        dialog.footnotes_editor = evt.editor;
      });

      var current_textarea = this.getElement().findOne('.footnote_text').getAttribute('id');
      var config = {
        stylesSet: false,
        customConfig: false,
        contentsCss: false,
        height: 80,
        autoGrow_minHeight: 80,
        autoParagraph: false,
        enterMode: CKEDITOR.ENTER_BR,
        toolbarGroups: [
          {name: 'basicstyles'},
        ]
      };
      config.allowedContent = 'br em strong; a[!href]';

      CKEDITOR.replace(current_textarea, config);
    },
    onOk() {
      var dialog = this;
      var footnote_editor = CKEDITOR.instances[dialog.editor_name];
      var footnote_data = footnote_editor.getData();
      CKEDITOR.plugins.footnotes.createFootnote(
        editor,
        this.realObj,
        this.getValueOf("info", "type"),
        footnote_data,
        this.getValueOf("info", "value")
      );
      delete this.fakeObj;
      delete this.realObj;
      footnote_editor.destroy();
    },
    onCancel() {
      var dialog = this;
      var footnote_editor = CKEDITOR.instances[dialog.editor_name];
      footnote_editor.destroy();
    }
  };
}

CKEDITOR.dialog.add("createfootnotes", editor => footnotesDialog(editor));
CKEDITOR.dialog.add("editfootnotes", editor => footnotesDialog(editor, 1));

如何将工具栏添加到自定义 ckeditor 4 对话框

how add toolbar to a custom ckeditor 4 dialog

javascript

ckeditor