4

I am experimenting with the React version of the Froala rich text editor

I've created a simple Editor component as follows

import { string } from 'prop-types'

// note the docs say do this
// import 'froala-editor/js/froala_editor.pkgd.min.js'

// but the advice from froala support is to do this instead
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 FroalaEditor from 'react-froala-wysiwyg'

import { FROALA_KEY } from 'config'

// for Froala options see https://froala.com/wysiwyg-editor/docs/options/
const Editor = ({ placeholderText }) => (
  <FroalaEditor
    tag="textarea"
    config={{
      key: FROALA_KEY,
      autofocus: true,
      attribution: false,
      placeholderText
    }}
  />
)
Editor.propTypes = { placeholderText: string }
Editor.defaultProps = { placeholderText: undefined }

export default Editor

Loosely based on this code codesandbox.io/s/agitated-gauss-9rzbt.

In both my component, and also in the code sandbox, the Froala bundle throws an error:

Uncaught TypeError: Cannot set property 'more_btn' of undefined

I've gone through a lot of their examples and can't see why this error should appear, or how to prevent it.

Any idea what I have missed?

Dave Sag
  • 13,266
  • 14
  • 86
  • 134

2 Answers2

2

According to the Froala support team, The fix for this issue will be available in the 4.0.4 release. In the meantime, You can use the V4.0: https://codesandbox.io/s/busy-turing-yzon2?file=/src/index.js.

2

As stated by Pervaiz, this issue will be fixed in 4.0.4 (according to Froala). In the meantime you can add:

indexOf: key => Object.keys(this).indexOf(key),

To the toolbarButtons object.

Credits for this fix to JeppeKnockaert in the github issue here