工具栏中的Summernote-angular自定义按钮

我想在我的页面上使用summernote编辑器，但我需要为其添加特殊功能。我想为summernote工具栏添加一个按钮。这个按钮应该像下拉菜单那样可以选择某个值，并且该值应该插入到当前光标位置。工具栏中的Summernote-angular自定义按钮

使用在我的想象：

的Html：

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

角控制器：

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

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

谢谢

来源

2014-11-08 Frk

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

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

内容：要显示的内容上的按钮提示：当鼠标移到点击提示文本：鼠标点击

示例插入文本“欢迎”时，回调函数被调用。

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

来源

2016-11-27 14:58:58 Varsha

工具栏中的Summernote-angular自定义按钮

回答

相关问题