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.

Please post code defining button array. Do you want buttons that need separate plugins? — Seano666, Oct 26 '17 at 19:59
@Seano666 , for example if I add `toolbarButtons=['bold', 'underline', 'color', 'formatOL', 'formatUL']` only bold and underline buttons appear. But, color and bullet buttons are missing. Its not that, their icon is missing the button altogether is missing. — Deb, Oct 27 '17 at 05:17
Could you explain more clearly what you think should be happening and what actually happens? — Vanquished Wombat, Oct 27 '17 at 10:59
For FormatOL and FormatUL, did you add the Lists plugin as outlined here? https://www.froala.com/wysiwyg-editor/docs/options#toolbarButtons — Seano666, Oct 27 '17 at 14:23
@Seano666 you are right, I missed that part. Thank you. Can you help me finding a clean way of adding all the js files from a folder? Or I must add them individually with script tags. I am using SpringBoot, Thymeleaf bdw. — Deb, Oct 27 '17 at 17:37
You should probably add them all separately with script tags. There's not a really good way to do it cleaner. I'll add an answer since it looks like I've answered your original question. — Seano666, Oct 27 '17 at 17:51
If I helped you with your initial question, would you mind marking my answer as the accepted answer? Thanks — Seano666, Nov 28 '17 at 17:27

score 3 · Answer 1 · answered Jul 25 '19 at 18:05

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.

score 2 · Accepted Answer · answered Oct 27 '17 at 17:54

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>

answered Oct 27 '17 at 17:54

Seano666

2,238
1
15
14

Some Toolbar Buttons are missing in Froala wysiwyg Editor

2 Answers2