工具欄中的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自定義按鈕

回答

相關問題