After searching for a JavaScript rich text editor that doesn't use frames and allows easy customization of the toolbar with custom dropdowns, I came across the Froala editor. It also offers AngularJS-friendly directives. Previously, I tried using TextAngular, but it lacked an easy way to add dropdowns.
The Froala editor is well-documented, but I'm facing challenges integrating custom dropdowns through the Angular directive. I need to define and register the dropdown using the editor instance retrieved from the options set in my controller. However, this approach is proving difficult as the editor instance reference is still undefined when trying to define the dropdown. You can find the complete code example here:
http://plnkr.co/edit/PnqnifGE54vMUzk28Jwf
My test code snippet is as follows:
function MainController($scope) {
var defaultHtml = "<span style=\"color:red\">Hello</span>, world!";
function addDropdown() {
var editor = $scope.froalaOptions.froalaEditor;
editor.DefineIcon("myDropdown", {
NAME: "myDropdown"
});
// Other dropdown configurations here...
}
// More controller logic and setup here...
}
var app = angular.module("test", [
"ui.bootstrap", "froala"
]);
app.controller("mainController", MainController);
Uncommenting the call to the addDropdown function causes an error due to the undefined editor instance reference. Besides this issue, everything else works fine. Can anyone provide guidance on the correct approach within the Angular context?