在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),它没有简单的方法添加下拉菜单。在AngularJS场景中为Froala编辑器添加自定义下拉菜单
这个编辑器有很好的文档记录(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提供正确的路径吗?
我从AngularJS指令和Froala支持团队的作者那里得到了一个答案(谢谢这两个!),所以我没有赞扬这篇文章,但它不适合评论:请参阅https://github.com/froala/angular-froala/issues/44。
实质上,没有Angular-ish这样做的方法:我们仍然需要“在为编辑器设置选项之前,在全局对象上运行这些命令”。你可以找到一个更新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
定义哪些按钮应该以较小的宽度显示。
您的代码包含'toolbarButtons',它具有各种*选项*,那么为什么它们不会在运行您的Plunkr时在文本区域工具栏中显示? –