Adding custom dropdown (with repro)

[Myrmex]

Hi, I'm trying to use your code to work with the froala editor using a custom dropdown. Anyway, I'm not sure about how to integrate the code adding the dropdown into the Angular scenario: given that I can retrieve a reference to the editor instance from the options set in my controller ($scope.froalaOptions=...), I should first set these options, then define and register the dropdown using the editor instance got from them ($scope.froalaOptions.froalaEditor), and finally set the toolbar buttons from the options, including the newly defined dropdown.

Apart from the fact that I'm not sure if I can set the buttons options again after setting them once, this does not work, as at the time I try to define the dropdown the editor instance reference is still undefined. You can find the full repro code here:

http://plnkr.co/edit/PnqnifGE54vMUzk28Jwf

Just uncomment the call to the addDropdown function and its following lines to see the error. Other than that, the code works. Could anyone suggest the correct way for doing this? Thanks!

[stefanneculai]

Hi @cgallarno! Could you please give us a hint on this for the V2 way of creating custom buttons? https://www.froala.com/wysiwyg-editor/v2.0/docs/examples/custom-buttons

[cgallarno]

Hello @Myrmex, The $scope.froalaOptions.froalaEditor is only populated after the editor has initialized and is designed to be used to send events to the editor. To Register custom buttons and dropdowns you still need to run those commands on the global $.FroalaEditor object before setting your options for the editor. I've update the plnkr to reflect this.

http://plnkr.co/edit/HkWCugpVv6jT3tsgEYGZ

However, the button is hidden. I can confirm it's there while inspecting the toolbar, but maybe @stefanneculai can explain why none of the visibility classes 'fr-visible-xs fr-visible-sm fr-visible-md' are getting added to the button.

[stefanneculai]

@Myrmex @cgallarno once a button is defined, it should also be included in the toolbarButtons when initializing the editor.

[Myrmex]

Thank you both, this is great. One more issue, unless I've minunderstood something in your replies: if you look at the Plunker example, you will see that no buttons or dropdowns appear except for bold, italic, undo, and redo. Only when I enlarge the windows beyond 1200px the other buttons appear, even if there is plenty of free space. Now this would be a problem, as I'm going to use the editor in a narrower area inside a more complex UI, and in most cases its width will be well below that treshold. Yet the button is set in toolbarButtons, and the same holds for other non-custom buttons like selectAll, clearFormatting, and fullScreen, which remain hidden too, unless I resize. I realize this is probably not an issue regarding the AngularJS directive, but I posted it here as it follows the discussion. Thank you again!

[cgallarno]

@Myrmex the toolbarButtons array lists all the buttons that should appear in the toolbar, in version 2 of the editor these buttons will appear when the width of the editor >= 1200. Take a look at toolbarButtonsMD and toolbarButtonsSM to get the buttons to appear in areas with smaller widths. https://www.froala.com/wysiwyg-editor/v2.0/docs/options#toolbarButtonsMD

[Myrmex]

Thank you again, my fault, I had not noticed these new properties in the V2 docs...

[danielgranat]

@cgallarno I am trying to find an alternative solution to accessing the editor, because i am concerned with race condition between the editor creation and setting froalaOptions.
I managed to get the following to work, but wanted to get your feedback on how valid/invalid this is:

$scope.$watch('froalaOptions.froalaEditor', function(newVal, oldVal) {
          if (newVal == undefined)
            return;
          // Destroy the instance so i can re-configure the toolbar.
          $scope.froalaOptions.froalaEditor('destroy');
          $scope.froalaOptions.froalaEditor({
            direction: 'auto',
            toolbarButtons: ['bold', 'italic', 'underline']
          });
        });

[cgallarno]

@danielgranat Have you experienced a race condition where your options were not set when the editor initialized? To answer your question, there shouldn't be a problem with that however you should unwatch the editor after you re-initialized.

[danielgranat]

@cgallarno I initially tried to go the way i mentioned here, so i haven't experienced it yet. I guess i can configure the editor during angular config, and then each editor instance can create it's own toolbar. Come to thinking about it now i think i was confused with the life cycle of configuring each editor instance and the global editor as well, but i don't think i have any race condition i need to handle. Thanks :)