Froala Editor Custom Input Field

Question

I've been looking around but have found no where that explains how to create a custom input field on the toolbar of froala editor. Something similar to how the url button works:

Froala url input

It has an input field and an insert, how can I add a button with similar functionality

Answer 1

Here is my take on using Froala's example and st3fan's suggestion. I wasn't sure how to use st3fan's Insert button, so I repurposed the closePopup button. In this case, I am wrapping the user's text with pre tags and inserting it into the editor.

    // 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']
    }) 

Answer 2

You could use the Custom Popup example as a starting point and extend from there by changing the initPopup method like this:

// 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;