froala not showing some toolbar buttons

Make sure you also have the css counterparts. Like plugins/image.min.css

Here's the list


To add buttons that require Plugins:

1.package.json

  "dependencies": {
     . . .
     "angular-froala-wysiwyg": "4.0.8",
  1. Add import of plugins for your button in app.module.ts

For example for fullscreen button:

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

import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
...
imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
... 
  1. Add in your angular.json (I am using styles.scss)

     "styles": [
         "src/styles.scss",
         "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
         "node_modules/froala-editor/css/froala_style.min.css"
     ],
     "scripts": [
         "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
     ] 
    

4.app.module.ts

<div [froalaEditor]>Hello, Froala!</div>
  1. You will see a fullscreen button:enter image description here