Javascript Froala编辑器自定义输入字段

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

它有一个输入字段和一个插入项，如何添加具有类似功能的按钮

您可以使用作为起点，并通过如下更改initPopup方法进行扩展：

//弹出按钮。
var弹出按钮=“”；
//创建按钮列表。
如果（editor.opts.popubuttons.length>1）{
弹出按钮+=''；
popup_buttons+=editor.button.buildList（editor.opts.popupButtons）；
弹出按钮+=''；
}
//自定义图层。
var custom_layer=''+编辑器.language.translate（'Insert'）+''；
//加载弹出式模板。
变量模板={
按钮：弹出按钮，
自定义\u层：自定义\u层
};
//创建弹出窗口。
var$popup=editor.popups.create（'customPlugin.popup'，模板）；
返回$popup；

以下是我对使用Froala的示例和st3fan的建议的看法。我不知道如何使用st3fan的插入按钮，所以我重新调整了关闭弹出按钮的用途。在本例中，我使用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']
    }) 

//定义弹出式模板。
$.extend（$.FroalaEditor.POPUP_模板{
'customPlugin.popup'：'[\u按钮][\u自定义\u图层]'
});
//定义弹出按钮。
$.extend（$.FroalaEditor.DEFAULTS{
popupButtons:['popupClose'，'|'，'popupButton1'，'popupButton2']，
});
//自定义弹出窗口在插件（新的或现有的）中定义。
$.FroalaEditor.PLUGINS.customPlugin=函数（编辑器）{
//创建自定义弹出窗口。
函数initPopup（）{
//加载弹出式模板。
var template=$.FroalaEditor.POPUP_TEMPLATES.customPopup；
if（typeof template=='function'）template=template.apply（编辑器）；
//弹出按钮。
var弹出按钮=“”；
//创建按钮列表。
如果（editor.opts.popubuttons.length>1）{
弹出按钮+=''；
popup_buttons+=editor.button.buildList（editor.opts.popupButtons）；
弹出按钮+=''；
}
//自定义图层。
var custom_layer=''；
//加载弹出式模板。
变量模板={
按钮：弹出按钮，
自定义\u层：自定义\u层
};
//创建弹出窗口。
var$popup=editor.popups.create（'customPlugin.popup'，模板）；
返回$popup；
}
//显示弹出窗口
函数showPopup（）{
//获取上面定义的弹出对象。
var$popup=editor.popups.get（'customPlugin.popup'）；
//如果弹出窗口不存在，则创建它。
//为了提高性能，最好在第一次需要时创建弹出窗口
//而不是在编辑器初始化时。
如果（！$popup）$popup=initPopup（）；
//将编辑器工具栏设置为弹出窗口的容器。
editor.popups.setContainer（'customPlugin.popup'，editor.$tb）；
//如果按下工具栏按钮时编辑器未显示，则将BODY设置为弹出窗口的容器。
//editor.popups.setContainer（'customPlugin.popup'，$（'body'）；
//触发弹出窗口的刷新。
//editor.popups.refresh（'customPlugin.popup'）；
//按编辑器工具栏上的按钮可打开此自定义弹出窗口。
//获取按钮的对象，以便相对于它放置弹出窗口。
var$btn=editor.$tb.find（'.fr命令[data cmd=“myButton”]'）；
//计算弹出窗口的位置。
var left=$btn.offset（）.left+$btn.outerWidth（）/2；
var top=$btn.offset（）.top+（editor.opts.toolbarBottom？10:$btn.outerHeight（）-10）；
//显示自定义弹出窗口。
//如果需要在按钮上方显示弹出窗口，则需要按钮的外灯。
editor.popups.show（'customPlugin.popup'，左，上，$btn.outerHeight（））；
}
//隐藏自定义弹出窗口。
函数hidePopup（）{
var html=$（“#fr my layer text-”+editor.id）.val（）；
html='
'+html+'
'；
editor.html.insert（html）；
editor.popups.hide（'customPlugin.popup'）；
}
//插件外部可见的方法。
返回{
showPopup:showPopup，
hidePopup：hidePopup
}
}
//为打开自定义弹出窗口的按钮定义图标和命令。
$.FroalaEditor.DefineIcon（'buttonIcon'，{NAME:'star'}）
$.FroalaEditor.RegisterCommand（'myButton'{
标题：“显示弹出窗口”，
图标：“按钮图标”，
撤消：false，
焦点：错误，
是的，
//编辑器工具栏中包含的按钮应设置插件属性。
插件：“customPlugin”，
回调：函数（）{
如果（！this.popups.isVisible（'customPlugin.popup'））{
this.customPlugin.showPopup（）；
}
否则{
if（此.$el.find（'.fr标记'））{
this.events.disableBlur（）；
this.selection.restore（）；
}
this.popups.hide（'customPlugin.popup'）；
}
}
});
//定义自定义弹出关闭按钮图标和命令。
$.FroalaEditor.DefineIcon（'popupClose'，{NAME:'plus'}）；
$.FroalaEditor.RegisterCommand（'popupClose'{
标题：“插入”，
撤消：false，
焦点：错误，
refreshAfterCallback：对，
回调：函数（）{
this.customPlugin.hidePopup（）；
}
});
jQuery（'#fro'）.froalaEditor({
codeMirror:window.codeMirror，
工具栏按钮：[“粗体”、“斜体”、“下划线”、“|”、“myButton”、“html”]，
可插入：['customPlugin'，'codeView'，'codeBeautifier']
})