Some Toolbar Buttons are missing in Froala wysiwyg Editor

Question

Full Froala wysiwyg Editor looks like this:

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

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.

Answer 1

If you are doing this is angular, it wasn't working for me by including the plugin JS in the angular.json file. Sticking it at the top of the main.ts file like so:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'hammerjs';
import 'froala-editor/js/plugins/fullscreen.min.js';
import 'froala-editor/js/plugins/code_view.min.js';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

Worked for me.

Answer 2

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>