在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定义哪些按钮应该以较小的宽度显示。