3

Toolbar buttons are not showing in our React App created by facebook/create-react-app.

I've tried importing the JS and CSS files in src/index.tsx or right before where the component is used. I also tried importing individual plugins. None of them is working.

// Froala Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/js/plugins.pkgd.min.js';
// Froala Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'froala-editor/css/plugins.pkgd.min.css';
// Froala requires Font Awesome.
import 'font-awesome/css/font-awesome.css';

This is how I set the options. I even tried only setting the align buttons, but it's not working.

<FroalaEditor
  model={model}
  onModelChange={onModelChange}
  config={{
    key: FROALA_KEY,
    attribution: false,
    toolbarButtons: {
      moreText: {
        buttons: [
          'bold',
          'italic',
          'underline',
          'strikeThrough',
          'subscript',
          'superscript',
          'fontFamily',
          'fontSize',
          'textColor',
          'backgroundColor',
          'inlineClass',
          'inlineStyle',
          'clearFormatting',
        ],
        align: 'left',
        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,
      },
    },
    ...config,
  }}
/>

I can only see these buttons on the UI no matter how I set up the options. enter image description here

yifei3212
  • 821
  • 1
  • 9
  • 28
  • For me this is working partially I suppose. However I can't see all buttons from plugins. For example fullscreen option is not working at all. Using same setup as you. – Shnigi Jun 11 '20 at 08:06
  • having the same issue – KD.S.T. Mar 22 '21 at 09:31

1 Answers1

1

I just figured out the problem. You have to pass in the plugin in pluginsEnabled array in config as well. Like this: 

pluginsEnabled: [
  'fullscreen',
  'codeBeautifier',
],
Shnigi
  • 972
  • 9
  • 19
  • 3
    Just adding, for everyone having the same issue described in the question, make sure you have `import 'froala-editor/js/plugins.pkgd.min.js` because without it, none plugin will work. – esteban21 Feb 06 '22 at 00:59
  • This import worked for me, I was stuck with this for a while. looks like the buttons weren't visible because of that. Thanks! – Susmita Sil Oct 07 '22 at 13:52