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

Adding custom dropdown to Froala editor in an AngularJS scenario

本文关键字：编辑器 添加 自定义 下拉菜单 Froala AngularJS      更新时间：2023-09-26

寻找一个没有框架的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，以定义哪些按钮应该以较小的宽度显示。

相关文章：