Summernote-angular 自定义工具栏按钮

Question

我希望在我的页面上使用summernote编辑器，但我需要添加特殊功能。我想在summernote工具栏中添加一个按钮，这个按钮应该是下拉式菜单的形式，在这里可以选择某些值，然后将所选值插入到当前光标位置。

我想象中的用法：

Html：

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

Angular 控制器:

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

我可以编辑summernote源代码来实现这一点。但是我不想用这种方式解决这个问题。有没有其他的解决方案呢？

谢谢。

- Frk

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();
}

- Varsha

---

这非常有帮助，足够容易为编辑器创建插件，并与其 UI 融合。了不起的工作，谢谢。 - Anupam