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创建按钮对象。此按钮对象具有以下属性。

内容：要在按钮上显示的内容工具提示：鼠标悬停时的工具提示文字 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
  }
});

同样，对于自定义dropDown按钮，您可以执行以下操作：

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

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

1 个答案: