工具栏中的Summernote角度自定义按钮 [英] Summernote-angular custom button in toolbar

问题描述

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

I want to use summernote editor on my page but I need to add special functionality for that. I want to add one button to summernote toolbar. This button should be something like dropdown where it is possible to select some value and this value should be inserted to current cursor position.

在我的想象中使用

HTML :

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

角度控制器:

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

我当然可以编辑summernote源代码来实现.但是我不想用这种方式解决这个问题.我的问题有其他解决方案吗?

I can edit summernote source code to achieve that, of course. But I don't want to solve this problem with this way. Is there some different solution for my problem?

谢谢

推荐答案

Summernote还支持自定义按钮.如果要创建自己的按钮，则可以简单地定义和使用选项.

Summernote also support custom button. If you want to create your own button, you can simply define and use with options.

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

Create button object using $.summernote.ui. This button objects have below properties.

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

contents: contents to be displayed on the button tooltip: tooltip text when mouse over click: callback function be called when mouse is clicked

插入文字欢迎"的示例.

Example for inserting text ‘Welcome’.

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 
}

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

now you can define custom button on toolbar options.

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

  buttons: {
    welcome: welcomeBtn
  }
});

类似地，对于自定义下拉按钮，您可以执行以下操作:

Similarly for custom dropDown button you can do something like this:

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

如果要在下拉菜单中显示一些预填充列表，则可以执行以下操作.

if you want to display some prepopulated list into your dropdown then you can do something like this..

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角度自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！