froala 没有显示一些工具栏按钮

Question

Froala doesn't want show some buttons (like: video, image, table ...) and I don't now why. Maybe I just forget add some script? This My options:

    public tb = [
        "bold", "italic" , "insertTable","insertImage"]; 
 public options: Object = { 
  placeholderText: 'Edit Your Content Here!',
  toolbarInline: false,
  toolbarButtons: this.tb,
        toolbarButtonsMD: this.tb,
        toolbarButtonsSM: this.tb,
        toolbarButtonsXS: this.tb
}

This My scripts:

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
  <script src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
<script src="bower_components/froala-wysiwyg-editor/js/plugins/image.min.js"></script>
  <script src="bower_components/froala-wysiwyg-editor/js/plugins/image_manager.min.js"></script>
<script src="bower_components/froala-wysiwyg-editor/js/plugins/video.min.js"></script>

And My client just show Bold and Italic, how can I fix it?

Answer 1

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

Here's the list

Answer 2

Froala version 2 requires Font Awesome (as well as jQuery). You need to include the font-awesome CSS file, eg through a CDN, to have the buttons in the toolbar visible:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Answer 3

To add buttons that require Plugins:

1.package.json

  "dependencies": {
     . . .
     "angular-froala-wysiwyg": "4.0.8",

2. 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() ... ],
... 

3. 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>

5. You will see a fullscreen button: