I am experimenting with the React version of the Froala rich text editor
- see also
react-froala-wysiwyg
.
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?