javascript - 在AngularJS场景中向Froala编辑器添加自定义下拉列表

寻找一个没有框架的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）定义和注册下拉菜单，最后从选项，包括新定义的下拉菜单。

除了我不确定一次设置按钮是否可以再次设置按钮之外，这是行不通的，因为在尝试定义下拉列表时，编辑器实例引用仍然未定义。您可以在此处找到完整的repro代码：

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环境的道路？

最佳答案

我从AngularJS指令的作者和Froala支持团队那里都得到了答案（感谢双方！），所以我对这篇文章不屑一顾，但没有发表评论：请参见https://github.com/froala/angular-froala/issues/44。

本质上，没有实现Angular的方法：我们仍然需要“在为编辑器设置选项之前，在全局$.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定义应以较小的宽度显示哪些按钮。