在 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 方法可以做到这一点：我们仍然需要“在为编辑器设置选项之前在全局 $.FroalaEditor 对象上运行这些命令”。您可以在此处找到更新的 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 来定义哪些按钮应该以较小的宽度显示。