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

寻找一个没有框架的JS富文本编辑器，允许轻松自定义工具栏（包括自定义下拉列表），如果可能的话，AngularJS友好，我在玩TextAngular（）之后发现了Froala编辑器（V2:）及其Angular指令（），这没有简单的方法添加下拉列表

这个编辑器有很好的文档记录（），但我通过Angular指令使用它，我不确定如何将添加下拉菜单的代码集成到Angular场景中：假设我可以从控制器中设置的选项中检索对编辑器实例的引用（

$scope.froalaOptions=…

），我应该首先设置这些选项，然后使用从中获得的编辑器实例（

$scope.froalaOptions.froalaEditor

）定义并注册下拉列表，最后从选项中设置工具栏按钮，包括新定义的下拉列表

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

我的测试代码如下：

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);

功能主控制器（$scope）{
var defaultHtml=“你好，世界！”；
函数addDropdown（）{
变量编辑器=$scope.froalaOptions.froalaEditor；
editor.DefineIcon（“myDropdown”{
名称：“myDropdown”
});
editor.RegisterCommand（“myDropdown”{
标题：“示例”，
键入：“下拉列表”，
图标：“下拉图标”，
焦点：对，
撤销：对，
refreshAfterCallback：对，
选项：{
“v1”：“选项1”，
“v2”：“选项2”
},
回调：函数（cmd，val）{
控制台日志（val）；
},
//刷新时回调。
刷新：函数（$btn）{
控制台日志（“执行刷新”）；
},
//在下拉显示中回调。
refreshOnShow:函数（$btn，$dropdown）{
console.log（“显示时刷新”）；
}
});
}
$scope.html=defaultHtml；
$scope.froalaOptions={
工具栏按钮：[“粗体”、“斜体”、“撤消”、“重做”、“全选”、“清除格式”、“全屏”]，
邮件地址：false，
是的，
shortcutsAvailable:[“粗体”、“斜体”]
};
//取消这些注释以尝试自定义下拉列表
//addDropdown（）；
//$scope.froalaOptions.toolbarbutions=
//[“粗体”、“斜体”、“撤消”、“重做”、“全选”、“清除格式”、“全屏”、“我的下拉列表”]；
$scope.reset=函数（）{
$scope.html=defaultHtml；
};
}
var app=angular.module（“测试”[
“ui.bootstrap”、“froala”
]);
应用控制器（“主控制器”，主控制器）；

---

只需取消对

addDropdown

函数的调用及其以下行的注释，即可查看错误。除此之外，代码还起作用。有人能给我推荐一条适合角度环境的正确路径吗？

我从AngularJS指令的作者和Froala支持团队那里得到了一个答案（感谢他们！），因此我对这篇文章没有任何评价，但它不适合评论：参见

从本质上讲，没有什么方法可以做到这一点：我们仍然需要“在设置编辑器选项之前，在全局

$.FroalaEditor

对象上运行这些命令”。您可以在此处找到更新的plnkr：

因此，函数如下所示：

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

，

toolbarbuttonsm

，和

toolbarButtonsXS

来定义哪些按钮应该以较小的宽度显示。

您的代码包含

toolbarButtons

，其中有各种选项，那么为什么在运行Plunkr时，它们不显示在文本区工具栏中呢？