Search code examples
javascriptjqueryhtmlcssfroala

Some Toolbar Buttons are missing in Froala wysiwyg Editor

Full Froala wysiwyg Editor looks like this: enter image description here

But after adding the API in my project, Some of the Toolbar buttons are missing. The snap is shown below.

enter image description here

As seen from the above, most of the toolbar buttons are missing from my editor, like- color, paragraph formatting etc.

I have included the following libraries:

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/css/froala_style.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.1/js/froala_editor.min.js'></script>

And using the following setting for editor:

<script>
        $(document).ready(function() {$('.editable-question').froalaEditor({
            initOnClick: true,
              charCounterCount: false,
        });
        });
    </script>

I have tried explicitly mentioning toolbarButtons array, also tried toolbarButtonsXS, toolbarButtonsMD etc for screen size option. Still no result. What am I missing?

Update: Using $('.editable-question').froalaEditor(); only has the same result.

Solution

  • Some buttons for the Froala editor require separate plugins, for which the files must be included manually.

    https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons

    <script src="../js/plugins/lists.min.js"></script>