CODEWITHSUNDEEP
javascriptjqueryangularwysiwygfroala
Guru Kara
Guru Kara

Reputation: 6462

Froala Editor: External toolbar which opens like a popup on button click

We are using the latest version of Froala in our project and want to set it up such that the toolbar should be triggered (popup) using a button external to editor. The editor by default should have no toolbar. Something very much similar to Gmail.

I did try to modify ‘Custom Popup’ example. By showing the custom popup using an external button. But for this to work the toolbar has to be visible always which we don’t want. https://www.froala.com/wysiwyg-editor/docs/concepts/custom/popup

Below are the screenshots of Gmail which gives good indication of what we want to achieve.

Step 1 – No toolbar by default enter image description here

Step 2 – Toolbar shows after clicking of the button enter image description here

Upvotes: 0

Views: 1457

Answers (1)

Guru Kara
Guru Kara

Reputation: 6462

I did get the working solution for this.

What I did was use

  1. User toolbarcontainer to put the toolbar in a different div outside the editor.https://www.froala.com/wysiwyg-editor/docs/options#toolbarContainer
  2. Then make parent div (which had the toolbarcontainer as child) a float-able div which can be displayed as and when needed using a button using simple CSS.

This solution is working as expected, even If I click on the other region of the page toolbar wont disappear

Hope my answer helps other as well

Upvotes: 2

Related Questions