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

Question

寻找一个没有框架的 JS 富文本编辑器，允许轻松自定义其工具栏，包括自定义下拉菜单，如果可能的话 AngularJS 友好，我找到了 Froala 编辑器(V2: https://www.froala.com/wysiwyg-editor )和在使用了 TextAngular ( https://github.com/froala/angular-froala/tree/editorV.2 ) 之后，它的 Angular 指令 ( http://textangular.com ) 没有简单的方法来添加下拉菜单。

这个编辑器有详细的文档记录( https://www.froala.com/wysiwyg-editor/v2.0/docs/examples/custom-dropdown )，但我通过 Angular 指令使用它，并且我不确定如何将添加下拉列表的代码集成到 Angular 场景中:鉴于我可以从 Controller 中设置的选项检索对编辑器实例的引用 ($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方式可以做到这一点:我们仍然需要“在设置选项之前在全局 $.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 来定义哪些按钮应以较小的宽度显示。