在AngularJS場景中爲Froala編輯器添加自定義下拉菜單

Question

尋找不帶框架的JS富文本編輯器，允許輕鬆定製其工具欄，包括自定義下拉框，並且如果可能的話AngularJS友好的，我找到了Froala編輯器（V2： https://www.froala.com/wysiwyg-editor）及其Angular指令（https://github.com/froala/angular-froala/tree/editorV.2），玩TextAngular（http://textangular.com），它沒有簡單的方法添加下拉菜單。

這個編輯器有很好的文檔記錄（https://www.froala.com/wysiwyg-editor/v2.0/docs/examples/custom-dropdown），但我通過Angular指令使用它，並且我不確定如何將添加下拉列表的代碼集成到Angular場景中：假設我可以檢索從我的控制器（$scope.froalaOptions=...）中設置的選項中引用編輯器實例，我應該首先設置這些選項，然後使用從它們獲取的編輯器實例（$scope.froalaOptions.froalaEditor）定義並註冊下拉列表，最後從選項中設置工具欄按鈕包括新定義的下拉菜單。

除了我不確定是否可以在設置一次後再次設置按鈕選項這一事實，這不起作用，因爲在我試圖定義下拉菜單時，編輯器實例引用仍未定義。你可以在這裏找到完整的攝製代碼：

http://plnkr.co/edit/PnqnifGE54vMUzk28Jwf

我的測試代碼是在這裏：

function MainController($scope) { 
    var defaultHtml = "<span style=\"color:red\">Hello</span>, world!"; 

    function addDropdown() { 
    var editor = $scope.froalaOptions.froalaEditor; 
    editor.DefineIcon("myDropdown", { 
     NAME: "myDropdown" 
    }); 
    editor.RegisterCommand("myDropdown", { 
     title: "Example", 
     type: "dropdown", 
     icon: "dropdownIcon", 
     focus: true, 
     undo: true, 
     refreshAfterCallback: true, 
     options: { 
     "v1": "Option 1", 
     "v2": "Option 2" 
     }, 
     callback: function(cmd, val) { 
     console.log(val); 
     }, 
     // Callback on refresh. 
     refresh: function($btn) { 
     console.log("do refresh"); 
     }, 
     // Callback on dropdown show. 
     refreshOnShow: function($btn, $dropdown) { 
     console.log("do refresh when show"); 
     } 
    }); 
    } 
    $scope.html = defaultHtml; 
    $scope.froalaOptions = { 
    toolbarButtons: ["bold", "italic", "undo", "redo", "selectAll", "clearFormatting", "fullscreen"], 
    convertMailAddresses: false, 
    plainPaste: true, 
    shortcutsAvailable: ["bold", "italic"] 
    }; 
    // uncomment these to try custom dropdown 
    //addDropdown(); 
    //$scope.froalaOptions.toolbarButtons = 
    // ["bold", "italic", "undo", "redo", "selectAll", "clearFormatting", "fullscreen", "myDropdown"]; 

    $scope.reset = function() { 
    $scope.html = defaultHtml; 
    }; 
} 
var app = angular.module("test", [ 
    "ui.bootstrap", "froala" 
]); 
app.controller("mainController", MainController); 

只是取消註釋調用addDropdown功能及其以下行來查看錯誤。除此之外，代碼的作品。任何人都可以爲Angular提供正確的路徑嗎？

Answer 1

我從AngularJS指令和Froala支持團隊的作者那裏得到了一個答案（謝謝這兩個！），所以我沒有讚揚這篇文章，但它不適合評論：請參閱https://github.com/froala/angular-froala/issues/44。

實質上，沒有Angular-ish這樣做的方法：我們仍然需要「在爲編輯器設置選項之前，在全局對象上運行這些命令」。你可以找到一個更新plnkr這裏：

http://plnkr.co/edit/HkWCugpVv6jT3tsgEYGZ

因此，函數如下：

function addDropdown() { 
    $.FroalaEditor.DefineIcon("myDropdown", { 
     NAME: "cog" 
    }); 
    $.FroalaEditor.RegisterCommand("myDropdown", { 
     title: "Example", 
     type: "dropdown", 
     focus: true, 
     undo: true, 
     refreshAfterCallback: true, 
     options: { 
     "v1": "Option 1", 
     "v2": "Option 2" 
     }, 
     callback: function(cmd, val) { 
     console.log(val); 
     }, 
     refresh: function($btn) { 
     console.log("do refresh"); 
     }, 
     refreshOnShow: function($btn, $dropdown) { 
     console.log("do refresh when show"); 
     } 
    }); 
} 

而且，一定要記得設置不僅toolbarButtons陣列，這在V2列出所有當編輯器的寬度大於1200時，應該出現在工具欄中的按鈕，而且toolbarButtonsMD,toolbarButtonsSM和toolbarButtonsXS定義哪些按鈕應該以較小的寬度顯示。