Missing toolbar buttons #230

AlexHyslop · 2020-03-03T14:32:39Z

Why are all my toolbar icons not showing? For example : fontFamily

import React, { Component } from 'react'
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditor from 'react-froala-wysiwyg';
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
import {createComment} from '../../../Store/Actions/commentActions'
import { connect } from 'react-redux'


import 'froala-editor/js/plugins.pkgd.min.js';

// Require Editor CSS files.



import firebase from 'firebase/app';
import 'firebase/firestore';


class ProjectAddComment extends Component {

    state = {
        model: '',
        value: '',
        projectId: this.props.projectId,
        parentId: this.props.parentId,
        preContent: 'Add a message',
        commentAuthor: this.props.auth.email,
        organisation: this.props.project.organisation,
        canView: this.props.project.canView,
        admin: this.props.project.admin,
        currentProjectTitle: this.props.currentProject.title
    };

    

  

    handleSubmit = (e) => {
        e.preventDefault();
       
        this.setState({
            model : ''
        })

      var db = firebase.firestore();
      const increment = firebase.firestore.FieldValue.increment(1);
    //   when delete const decrement = firebase.firestore.FieldValue.increment(-1);
        db.collection('projects').doc(this.state.parentId).update({

            commentAmount :  increment,
            total: increment
            
        })

    this.props.createComment(this.state)
    }
  


      
      handleModelChange = (model) => {
        // html is the new html content
        // text is the new text content
        
        this.setState( {
            model: model
        } );

        console.log(this.state.model)
      }

      

      

    render() { 

        var timestamp = Number(new Date());
        var storageRef = firebase.storage().ref(this.props.currentProject.organisation + '/' + timestamp.toString());
        // var thisModel = this.state.model;

        this.config = {
            name: "textarea",
            //key: 
            placeholderText: 'Edit Your Content Here!',
            //pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', 'draggable', 'embedly', 'emoticons', 'entities', 'file', 'fontFamily', 'fontSize', 'fullscreen', 'image', 'imageManager', 'inlineStyle', 'lineBreaker', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'quickInsert', 'quote', 'save', 'table', 'url', 'video', 'wordPaste'],
            colorsHEXInput: false,
            autoFocus: true,
            toolbartop: true,
            linkAlwaysBlank: true,
            fontFamilySelection: true,
            fontSizeSelection: true,
            paragraphFormatSelection: true,
            htmlExecuteScripts: true,
            iframe: true,
            tabSpaces: 4,
            toolbarButtons:{
              moreText: {
                buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
    
                // Alignment of the group in the toolbar.
                align: 'left',
    
                // By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
                buttonsVisible: 3
              },
              moreParagraph: {
                buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
                align: 'left',
                buttonsVisible: 3
              },
    
              moreRich: {
                buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
                align: 'left',
                buttonsVisible: 3
              },
    
              moreMisc: {
                buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
                align: 'right',
                buttonsVisible: 2
              }
            },
              events: {
                "file.error": function(error, response) {
                  console.log(error);
                  console.log(response);
                },
                
                "file.beforeUpload": function(files) {
                  let editor = this;
                  for (let index = 0; index < files.length; index++) {
                    const file = files[index];
                    console.log(file);
                    storageRef.put(file).then(snapshot => {
                      return snapshot.ref.getDownloadURL(); 
                      
                    }).then(downloadURL => {
                      console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
                      // thisModel = thisModel + downloadURL;
                      
                      editor.popups.hideAll();
                        
                      this.html.insert('<a href=' + downloadURL + '>'+ file.name +'</a>', true);
                     
                     
                   }).catch((e) => {
                      console.log(e);
                    })
                  }
                  // You need to set it as false, to prevent Froala uplaod.
                  return false;
                },
                "file.uploaded": function(e, editor, downloadURL) {
                    editor.file.insert(downloadURL);
                    return false
                  
                },
                "image.error": function(error, response) {
                    console.log(error);
                    console.log(response);
                  },
                  "image.beforePasteUpload": function(images) {

                    for (let index = 0; index < images.length; index++) {
                      const image = images[index];
                      console.log('file name?' + image.name);
                      storageRef.put(image).then(snapshot => {
                        return snapshot.ref.getDownloadURL(); 
                        
                      }).then(downloadURL => {
                        console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
                        // thisModel = thisModel + downloadURL;
                        
                          console.log('file url = ' +  downloadURL)
                          
                          this.html.insert('<img src=' + downloadURL + '></img>', true);
                       
                       
                     }).catch((e) => {
                        console.log(e);
                      })
                    }
                    // You need to set it as false, to prevent Froala uplaod.
                    return false;

                  },
                  "image.beforeUpload": function(images) {
                    let editor = this;
                    for (let index = 0; index < images.length; index++) {
                      const image = images[index];
                      storageRef.put(image).then(snapshot => {
                        return snapshot.ref.getDownloadURL(); 
                        
                      }).then(downloadURL => {
                        console.log(`Successfully uploaded file and got download link - ${downloadURL}`);
                        // thisModel = thisModel + downloadURL;
                        
                          console.log('file url = ' +  downloadURL)
                          editor.popups.hideAll();
                          
                          this.html.insert('<img src=' + downloadURL + '></img>', true);
                       
                       
                     }).catch((e) => {
                        console.log(e);
                      })
                    }
                    // You need to set it as false, to prevent Froala uplaod.
                    return false;
                  }
                  
              }
          
            }  

    
        
        
    
         
 
        return(

           
               <div className="comment-reply">
                    
                    <h1>Reply:</h1>
                    <form class="comment-form" onSubmit={this.handleSubmit} onFocus={this.handleFocus}>
                        <div id="editor" className="form-group comment-reply-content">
                        <FroalaEditor
                          tag='textarea'
                          config = {this.config}
                          model={this.state.model}
                          onModelChange={this.handleModelChange}
                          
                       
                        />
                      {/* <FroalaEditor /> */}
                        </div>
                        <div className="form-group">
                            <input type="submit" className="btn btn-primary"  />
                        </div>
                    </form>
                    
                </div>    
            
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        createComment: (comment) => dispatch(createComment(comment))
    }
}

export default connect(null, mapDispatchToProps)(ProjectAddComment)

The text was updated successfully, but these errors were encountered:

baronnoraz · 2020-03-04T07:07:32Z

I suddenly started having the same problem.

A dependency changed...^3.0.6 to ^3.1.0, so I thought that was the culprit. However, I deleted node_modules and package-lock.json and reran npm install, and my editor continues to be missing icons.

The code itself hasn't been changed in months, so I'm still trying to see what dependency change is causing the problem. I can't think of anything else it might be, since the code hasn't changed.

I thought I was going crazy. I'm glad someone else is seeing the problem too.

const config = {
  autoSave: true,
  charCounterCount: true,
  fontFamilySelection: true,
  fontSizeSelection: true,
  iconsTemplate: 'font_awesome_5r',
  imageMaxSize: 16 * 1024 * 1024, 
  imageUploadParam: 'file',
  imageUploadParams: {
    id: 'my_editor'
  },
  imageUploadMethod: 'POST',
  imageUploadURL: '/api/d/cms/uploads/image',
  placeholderText: 'Edit Your Content Here!',
  pluginsEnabled: [
    'align',
    'charCounter',
    'codeBeautifier',
    'codeView',
    'colors',
    'draggable',
    'emoticons',
    'entities',
    'fontFamily',
    'fontSize',
    'fullscreen',
    'help',
    'image',
    'inlineClass',
    'inlineStyle',
    'link',
    'lists',
    'paragraphFormat',
    'paragraphStyle',
    'print',
    'quote',
    'save',
    'specialCharacters',
    'table',
    'url',
    'video',
    'wordPaste'
  ],

  saveInterval: 2500,

  // Set the save param.
  saveParam: 'content',

  // Set the save URL.
  saveURL: 'http://localhost:3001/api/cms/save',

  // HTTP request type.
  saveMethod: 'POST',

  // Additional save params.
  saveParams: {
    id: 'my_editor'
  },

  toolbarButtons: {
    moreText: {
      buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
      buttonsVisible: 3
    },
    moreParagraph: {
      buttons: ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'outdent', 'indent', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'quote'],
      buttonsVisible: 6
    },
    moreRich: {
      buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
      buttonsVisible: 4
    },
    moreMisc: {
      buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'selectAll', 'html', 'help', 'save'],
      align: 'right',
      buttonsVisible: 2
    }
  }
};

AlexHyslop · 2020-03-04T10:49:25Z

Yeah mine was working fine, then suddenly found buttons missing one day...exactly the same situation here

berikiushi · 2020-03-04T13:59:52Z

This helped us:
remove froala-editor from package.json if you have
install/replace react-froala-wysiwyg to 3.1.0 ("react-froala-wysiwyg": "3.1.0")
delete node_modules and package-lock.json and reinstall

AlexHyslop · 2020-03-04T15:23:55Z

That worked! thank you so much

baronnoraz · 2020-03-04T16:12:46Z

@berikiushi you're a lifesaver. Removing the froala-editor dependency got things working again for me too!!

nevendyulgerov · 2020-03-11T12:16:43Z

Same here, buttons just disappeared out of the blue without any changes on my side.

This worked previously:

import React from 'react';
import FroalaEditor from 'react-froala-wysiwyg';
import 'froala-editor/js/froala_editor.pkgd.min';
import 'froala-editor/js/plugins.pkgd.min';
import 'froala-editor/js/plugins/link.min';
import 'froala-editor/js/plugins/lists.min';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

const Editor = ({ value, onChange }) => (
	<FroalaEditor
		tag="textarea"
		model={value}
		onModelChange={onChange}
		config={{
			key: '...', // removed for security reasons
			toolbarButtons: ['bold', 'italic', 'insertLink', 'formatOL', 'formatUL'],
			pluginsEnabled: ['link', 'lists']
		}}
	/>
);

export default Editor;

The resulting UI is this:

The only buttons I see are bold and italic. The ones powered by plugins - insertLink, formatOL, formatUL - stopped working.

Can you suggest a solution to this problem please?

The suggested fix provided by @berikiushi does not work for me because I need the froala-editor plugins and also methods exposed by froala-editor for custom buttons.

berikiushi · 2020-03-11T15:55:36Z

@nevendyulgerov
you do not need to install froala-editor additionally because react-froala-wysiwyg has it in dependencies. I advise you to try my solution and import the react-froala-wysiwyg and plugins as recommended here https://github.com/froala/react-froala-wysiwyg#usage

vidup · 2020-04-01T14:02:36Z

Thank you @berikiushi !

lsbyerley · 2020-05-11T15:15:36Z

@berikiushi
you do not need to install froala-editor additionally because react-froala-wysiwyg has it in dependencies. I advise you to try my solution and import the react-froala-wysiwyg and plugins as recommended here https://github.com/froala/react-froala-wysiwyg#usage

why does the example you linked use FroalaEditorComponent instead of FroalaEditor? I see the FroalaEditor used everywhere else except in your example.

berikiushi · 2020-05-13T14:15:33Z

why does the example you linked use FroalaEditorComponent instead of FroalaEditor? I see the FroalaEditor used everywhere else except in your example.

I can't answer you question. I'm not the developer or support of this library just shared a solution that helped me.

eimenanacreado · 2020-05-17T10:28:22Z

I had the same isuss for the version 3.1.1-1 (React Froala doesn't show the icons like images and code view) so i did that :

Removing react-froala from package.json
npm uninstall react-froala
npm install react-froala-wysiwyg@3.1.0

into my component :

import 'froala-editor/js/plugins.pkgd.min.js';

import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';


const config = {
        placeholderText: 'Edit Your Content Here!',
        charCounterCount: false,
        toolbarButtons: {
            'moreText': {
                'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
            },
            'moreParagraph': {
                'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
            },
            'moreRich': {
                'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
            },
            'moreMisc': {
                'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
                'align': 'right',
                'buttonsVisible': 2
            },
        },
    }

return(
<FroalaEditorComponent config={config} tag='textarea' />
)

dejanmartinovic · 2020-08-17T12:40:37Z

@eimenanacreado Make sure you use the same version of froala-editor and react-froala -wysiwyg:

"froala-editor": "3.1.1",
"react-froala -wysiwyg": "3.1.1"

or simply update to the latest release. The issue is already fixed.

Maadtin · 2020-09-11T19:35:18Z

This is still happening to me :'v react-froala-wysiwyg version 3.2.1

baronnoraz · 2020-09-11T19:49:51Z

There seems to be a mixture of folks saying

have both froala-editor and react-froala-wysiwyg as dependencies and make sure the versions match
only have react-froala-wysiwyg

In my project, we only depend upon react-froala-wysiwyg version 3.1.1, and things work fine. What do you have in your dependencies? and have you tried with version 3.1.1?

Maadtin · 2020-09-11T20:18:27Z

@baronnoraz Just tried 3.1.1 and still not working for me, but normal froala-editor package works..

dejanmartinovic · 2020-09-12T08:37:48Z

@baronnoraz That is correct. You need to install froala-editor only in case of extending the editor with custom elements (buttons, dropdowns, etc).
@Maadtin Can you double-check if the plugins are imported properly? import 'froala-editor/js/plugins.pkgd.min.js';
If that doesn't resolve the problem, can you try to reproduce the issue in Sandbox? You can use this project as a starting point (3.2.1-1):
https://ec20o.csb.app/

Maadtin · 2020-09-12T10:00:14Z

@dejanmartinovic Hello, Just tried latest version and It's working but I can't get to work with fullfeatured mode, colors option It's still missing :S

GaddMaster · 2020-10-14T10:10:10Z

I was suffering from the same issue. I needed both froala-editor and react-froala-wysiwyg as have custom buttons.
I was reluctant try @berikiushi approach even though I can see it worked for @vidup, because I need froala-editor for custom buttons.
I tried it anyways ! (I little jump start or restart can help I suppose sometimes.)
I commented out all the code that required froala-editor and removed it from the package.json file, then rebuilt. The buttons re-appeared. I then commented back in the custom button code and put froala-editor back in the package.json file and rebuilt, ALL GOOD NOW.
Good jump start.
Id love know what this is, maybw some yarn.lock, or some package dependencies error
Daniel

dejanmartinovic · 2020-10-14T11:56:32Z

@GaddMaster @Maadtin Are you use version 3.2.2?
https://codesandbox.io/s/beautiful-goldwasser-vlqei

GaddMaster · 2020-10-14T11:58:22Z

@dejanmartinovic I was using the newest versions 3.2.2 but in this fix I moved to 3.1.0. Ill test moving back to 3.2.2 soon

asp3 · 2020-11-10T19:30:01Z

still having the same issue on 3.2.3, but @berikiushi's solution still works (using 3.1.0)

crystalcatdika · 2020-11-14T07:37:46Z

plugins.pkgd.min.js is useful

"react-froala-wysiwyg": "^3.2.3",
import 'froala-editor/js/plugins.pkgd.min.js';
// import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditor from 'react-froala-wysiwyg';
<FroalaEditor tag='textarea' />

Arisdolanan · 2021-03-23T15:52:25Z

i use "react-froala-wysiwyg": "3.2.1-1" and "react": "16.12.0"

import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/js/froala_editor.pkgd.min.js";
import FroalaEditor from "react-froala-wysiwyg";

const documentConfig = {
documentReady: true,
toolbarButtons: [
'fullscreen',
'undo',
'redo',
"paragraphFormat",
"fontFamily",
"fontSize",
"bold",
"italic",
"underline",
"strikeThrough",
"textColor",
"backgroundColor",
"insertLink",
"insertImage",
"alignLeft",
"alignCenter",
"formatOLSimple",
"alignRight",
"alignJustify",
"lineHeight",
"formatOL",
"formatUL",
"outdent", "indent",
"subscript",
"superscript",
"fontAwesome",
"embedly",
"clearFormatting",
"paragraphStyle",
"quote",
'codeView',
'html',
]
}

dejanmartinovic · 2021-03-31T20:38:51Z

@Arisdolanan You need to import plugins.pkgd.min.js file.
https://codesandbox.io/s/beautiful-goldwasser-vlqei

challet · 2021-04-13T16:21:19Z

It's because of the plugins (core and native) are being set on froala-editor imported from top app node_modules. While react-froala-wysiwyg instantiate it with an-other-but-equally named dependency. Looks related to how npm and/or this package config deals with nested dependencies.

JacksonLaw · 2022-07-27T06:27:13Z

I had a similar issue where I was missing the undo and redo buttons but all others were working.

My setup:
"react-froala-wysiwyg": "^2.9.1"
No react-editor install (it didn't help)

I managed to fix it by adding the font awesome unicodes in my css file because I noticed the ::before was missing from the missing icons.

i.fa.fa-rotate-left::before {
  content: '\f2ea';
}

i.fa.fa-rotate-right::before {
  content: '\f2f9';
}```

ilyaskarim · 2023-07-21T14:33:49Z

Importing the following line fixes the issue:
import plugins.pkgd.min.js

ilyaskarim closed this as completed Jul 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing toolbar buttons #230

Missing toolbar buttons #230

AlexHyslop commented Mar 3, 2020 •

edited

baronnoraz commented Mar 4, 2020

AlexHyslop commented Mar 4, 2020

berikiushi commented Mar 4, 2020

AlexHyslop commented Mar 4, 2020

baronnoraz commented Mar 4, 2020

nevendyulgerov commented Mar 11, 2020 •

edited

berikiushi commented Mar 11, 2020

vidup commented Apr 1, 2020

lsbyerley commented May 11, 2020 •

edited

berikiushi commented May 13, 2020

eimenanacreado commented May 17, 2020 •

edited

dejanmartinovic commented Aug 17, 2020

Maadtin commented Sep 11, 2020

baronnoraz commented Sep 11, 2020

Maadtin commented Sep 11, 2020

dejanmartinovic commented Sep 12, 2020

Maadtin commented Sep 12, 2020

GaddMaster commented Oct 14, 2020 •

edited

dejanmartinovic commented Oct 14, 2020

GaddMaster commented Oct 14, 2020

asp3 commented Nov 10, 2020

crystalcatdika commented Nov 14, 2020 •

edited

Arisdolanan commented Mar 23, 2021

dejanmartinovic commented Mar 31, 2021

challet commented Apr 13, 2021 •

edited

JacksonLaw commented Jul 27, 2022

ilyaskarim commented Jul 21, 2023

Missing toolbar buttons #230

Missing toolbar buttons #230

Comments

AlexHyslop commented Mar 3, 2020 • edited

baronnoraz commented Mar 4, 2020

AlexHyslop commented Mar 4, 2020

berikiushi commented Mar 4, 2020

AlexHyslop commented Mar 4, 2020

baronnoraz commented Mar 4, 2020

nevendyulgerov commented Mar 11, 2020 • edited

berikiushi commented Mar 11, 2020

vidup commented Apr 1, 2020

lsbyerley commented May 11, 2020 • edited

berikiushi commented May 13, 2020

eimenanacreado commented May 17, 2020 • edited

dejanmartinovic commented Aug 17, 2020

Maadtin commented Sep 11, 2020

baronnoraz commented Sep 11, 2020

Maadtin commented Sep 11, 2020

dejanmartinovic commented Sep 12, 2020

Maadtin commented Sep 12, 2020

GaddMaster commented Oct 14, 2020 • edited

dejanmartinovic commented Oct 14, 2020

GaddMaster commented Oct 14, 2020

asp3 commented Nov 10, 2020

crystalcatdika commented Nov 14, 2020 • edited

Arisdolanan commented Mar 23, 2021

dejanmartinovic commented Mar 31, 2021

challet commented Apr 13, 2021 • edited

JacksonLaw commented Jul 27, 2022

ilyaskarim commented Jul 21, 2023

AlexHyslop commented Mar 3, 2020 •

edited

nevendyulgerov commented Mar 11, 2020 •

edited

lsbyerley commented May 11, 2020 •

edited

eimenanacreado commented May 17, 2020 •

edited

GaddMaster commented Oct 14, 2020 •

edited

crystalcatdika commented Nov 14, 2020 •

edited

challet commented Apr 13, 2021 •

edited