工具栏中的 Summernote 角度自定义按钮

Question

我想在我的页面上使用 Summernote 编辑器，但我需要为此添加特殊功能。我想在summernote 工具栏上添加一个按钮。这个按钮应该是类似于下拉菜单的东西，可以在其中选择一些值，并且这个值应该插入到当前光标位置。

我想象中的用法：

HTML：

<summernote some-values="values"></summernote>

角度控制器：

module.controller("ControllerName", ["$scope", ($scope) => {
   $scope.values = ["value-for-insert1", "value-for-insert2", "value-for-insert3"];
}]);

当然，我可以编辑summernote 源代码来实现这一点。但我不想用这种方式解决这个问题。我的问题有什么不同的解决方案吗？

谢谢

Answer 1

Summernote 也支持自定义按钮。如果你想创建自己的按钮，你可以简单地定义和使用选项。

使用 $.summernote.ui 创建按钮对象。此按钮对象具有以下属性。

contents：要在按钮上显示的内容 tooltip：鼠标悬停时的工具提示文本 click：鼠标点击时调用的回调函数

插入文本“欢迎”的示例。

var welcomeBtn = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/> WELCOME',
    tooltip: 'welcome',
    click: function () {
      // invoke insertText method with 'welcome' on editor module.
      context.invoke('editor.insertText', 'welcome');
    }
  });

  return button.render();   // return button as jquery object 
}

现在您可以在工具栏选项上定义自定义按钮。

$('.summernote').summernote({
  toolbar: [
    ['mybutton', ['welcome']]
  ],

  buttons: {
    welcome: welcomeBtn
  }
});

与自定义下拉按钮类似，您可以执行以下操作：

var emojiBtn = function (context) {

    var ui = $.summernote.ui;

    var emojiList = ui.buttonGroup([
              ui.button({
                className: 'dropdown-toggle',
                contents: '<span class="fa fa-smile-o"></span> <span class="caret"></span>',
                tooltip: "Insert Greetings",
                data: {
                  toggle: 'dropdown'
                }
              }),
              ui.dropdown({
                className: 'dropdown-style',
                contents: "<ol><li>smile</li><li>sleepy</li><li>angry</li></ol>",
                callback: function ($dropdown) {
                    $dropdown.find('li').each(function () {
                      $(this).click(function() {
                        context.invoke("editor.insertText", $(this).html());
                      });
                    });
                }
              })
    ]).render();
}

如果您想在下拉列表中显示一些预先填充的列表，那么您可以执行以下操作..

var emojiBtn = function (context) {

    var ui = $.summernote.ui;
    var list = $('#elements-list').val();

    var button = ui.buttonGroup([
              ui.button({
                className: 'dropdown-toggle',
                contents: '<span class="fa fa-smile-o"></span> <span class="caret"></span>',
                tooltip: "Insert Greetings",
                data: {
                  toggle: 'dropdown'
                }
              }),
              ui.dropdown({
                className: 'drop-default summernote-list',
                contents: "<ul>"+list+"</ul>",
                callback: function ($dropdown) {
                    $dropdown.find('li').each(function () {
                      $(this).click(function() {
                        context.invoke("editor.insertText", $(this).html());
                      });
                    });
                }
              })
    ]);

    return button.render();
}