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;

Answer 2

这是我对使用 Froala 的示例和 st3fan 的建议的看法。我不确定如何使用 st3fan 的 Insert 按钮，所以我重新调整了 closePopup 按钮的用途。在这种情况下，我使用 pre 标记包装用户的文本并将其插入到编辑器中。

    // Define popup template.
$.extend($.FroalaEditor.POPUP_TEMPLATES, {
  'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
});

// Define popup buttons.
$.extend($.FroalaEditor.DEFAULTS, {
  popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
});

// The custom popup is defined inside a plugin (new or existing).
$.FroalaEditor.PLUGINS.customPlugin = function (editor) {
  // Create custom popup.
  function initPopup () {
    // Load popup template.
    var template = $.FroalaEditor.POPUP_TEMPLATES.customPopup;
    if (typeof template == 'function') template = template.apply(editor);

            // 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"><textarea id="fr-my-layer-text-' + editor.id + '"  placeholder="' + editor.language.translate('Alternate Text') + '" tabIndex="1"></textarea></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;


  }

  // Show the popup
  function showPopup () {
    // Get the popup object defined above.
    var $popup = editor.popups.get('customPlugin.popup');

    // If popup doesn't exist then create it.
    // To improve performance it is best to create the popup when it is first needed
    // and not when the editor is initialized.
    if (!$popup) $popup = initPopup();

    // Set the editor toolbar as the popup's container.
    editor.popups.setContainer('customPlugin.popup', editor.$tb);

    // If the editor is not displayed when a toolbar button is pressed, then set BODY as the popup's container.
    // editor.popups.setContainer('customPlugin.popup', $('body'));

    // Trigger refresh for the popup.
    // editor.popups.refresh('customPlugin.popup');

    // This custom popup is opened by pressing a button from the editor's toolbar.
    // Get the button's object in order to place the popup relative to it.
    var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]');

    // Compute the popup's position.
    var left = $btn.offset().left + $btn.outerWidth() / 2;
    var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);

    // Show the custom popup.
    // The button's outerHeight is required in case the popup needs to be displayed above it.
    editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight());
  }

  // Hide the custom popup.
  function hidePopup () {

    var html = $("#fr-my-layer-text-" + editor.id).val();

    html = '<br/><pre>' + html + '</pre><br/>';

    editor.html.insert(html);

    editor.popups.hide('customPlugin.popup');

  }

  // Methods visible outside the plugin.
  return {
    showPopup: showPopup,
    hidePopup: hidePopup
  }
}

// Define an icon and command for the button that opens the custom popup.
$.FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star'})
$.FroalaEditor.RegisterCommand('myButton', {
  title: 'Show Popup',
  icon: 'buttonIcon',
  undo: false,
  focus: false,
  popup: true,
  // Buttons which are included in the editor toolbar should have the plugin property set.
  plugin: 'customPlugin',
  callback: function () {
    if (!this.popups.isVisible('customPlugin.popup')) {
      this.customPlugin.showPopup();
    }
    else {
      if (this.$el.find('.fr-marker')) {
        this.events.disableBlur();
        this.selection.restore();
      }
      this.popups.hide('customPlugin.popup');
    }
  }
});

// Define custom popup close button icon and command.
$.FroalaEditor.DefineIcon('popupClose', { NAME: 'plus' });
$.FroalaEditor.RegisterCommand('popupClose', {
  title: 'Insert',
  undo: false,
  focus: false,
  refreshAfterCallback: true,
  callback: function () {
    this.customPlugin.hidePopup();
  }
});

    jQuery('#fro').froalaEditor({
        codeMirror: window.codeMirror,
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'myButton', 'html'],
  pluginsEnabled: ['customPlugin', 'codeView', 'codeBeautifier']
    })