javascript - Froala 编辑器自定义输入字段

Question

我一直在四处寻找，但没有找到解释如何在 froala 编辑器的工具栏上创建自定义输入字段的地方。类似于 url 按钮的工作方式:

Froala url input

它有一个输入框和一个插入框，我怎样才能添加一个具有类似功能的按钮

Answer 1

您可以使用 Custom Popup example作为起点并通过像这样更改 initPopup 方法从那里扩展:

// Popup buttons.
var popup_buttons = '';

// Create the list of buttons.
if (editor.opts.popupButtons.length > 1) {
  popup_buttons += '<div class="fr-buttons">';
  popup_buttons += editor.button.buildList(editor.opts.popupButtons);
  popup_buttons += '</div>';
}

// Custom layer.
var custom_layer = '<div class="fr-my-layer fr-layer fr-active" id="fr-my-layer-' + editor.id + '"><div class="fr-input-line"><input id="fr-my-layer-text-' + editor.id + '" type="text" placeholder="' + editor.language.translate('Alternate Text') + '" tabIndex="1"></div><div class="fr-action-buttons"><button type="button" class="fr-command fr-submit" data-cmd="myButton" tabIndex="2" role="button">' + editor.language.translate('Insert') + '</button></div></div>';

// Load popup template.
var template = {
  buttons: popup_buttons,
  custom_layer: custom_layer
};

// Create popup.
var $popup = editor.popups.create('customPlugin.popup', template);

return $popup;