CODEWITHSUNDEEP
javascriptangularfroala
Kirill Achramionok
Kirill Achramionok

Reputation: 113

froala not showing some toolbar buttons

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?

enter image description here

Upvotes: 8

Views: 5214

Answers (3)

фымышонок
фымышонок

Reputation: 1580

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

Upvotes: 1

thephper
thephper

Reputation: 2610

Froala version 2 requires Font Awesome (as well as jQuery). You need to include the font-awesome CSS file, e.g. 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">

Upvotes: 0

Ruslan
Ruslan

Reputation: 2009

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

Here's the list

Upvotes: 1

Related Questions