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=".7.0/css/font-awesome.min.css" />
<link href='.7.1/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<link href='.7.1/css/froala_style.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='.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.

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./font-awesome/4.7.0/css/font-awesome.min.css" />
<link href='https://cdnjs.cloudflare./ajax/libs/froala-editor/2.7.1/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdnjs.cloudflare./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./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.

• javascript
• jquery
• html
• css
• froala

Share Improve this question Follow edited Oct 27, 2017 at 17:24 Deb asked Oct 26, 2017 at 18:31 DebDeb 5,65988 gold badges3636 silver badges5050 bronze badges 8

• Please post code defining button array. Do you want buttons that need separate plugins? – Seano666 Commented Oct 26, 2017 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 Commented Oct 27, 2017 at 5:17
• Could you explain more clearly what you think should be happening and what actually happens? – Vanquished Wombat Commented Oct 27, 2017 at 10:59
• 2 For FormatOL and FormatUL, did you add the Lists plugin as outlined here? froala./wysiwyg-editor/docs/options#toolbarButtons – Seano666 Commented Oct 27, 2017 at 14:23
• 1 @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 Commented Oct 27, 2017 at 17:37

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

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

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

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