how to use license key in react-froala with nextjs

Question

I'm using "react-froala-wysiwyg": "^2.9.1-1" with "next": "^7.0.2" version.

I purchased license and created license key using domain. but I don't know how to use it.

I tried froala method in componentDidMount but It doesn't work.

componentDidMount() {
    $('.fr-box').froalaEditor({
      key: config.froalaLicense
    });
  }

render() {
 return (
     <FroalaEditor
        tag='textarea'
        model={content}
        onModelChange={handleChangeForContent}
        config={{
          placeholder: "Edit Me",
          charCounterCount: false,
          events: {
            'froalaEditor.image.beforeUpload': (e, editor, images) => {
              setTargetImage(images[0])
            },
            'froalaEditor.image.inserted': (e, editor, response) => {
              uploadImageForEditor(response[0])
            }
          }
        }}
      />
 )
}

This code is from froala document. please teach me how to remove the notice, Unlicensed copy of the Froala Editor. Use it legally by purchasing a license.

Answer 1

You need pass key as in config object.

componentDidMount() {
    $('.fr-box').froalaEditor({
      key: config.froalaLicense
    });
  }

render() {
 return (
     <FroalaEditor
        tag='textarea'
        model={content}
        onModelChange={handleChangeForContent}
        config={{
          key: "YOUR_KEY", // Pass your key here
          placeholder: "Edit Me",
          charCounterCount: false,
          events: {
            'froalaEditor.image.beforeUpload': (e, editor, images) => {
              setTargetImage(images[0])
            },
            'froalaEditor.image.inserted': (e, editor, response) => {
              uploadImageForEditor(response[0])
            }
          }
        }}
      />
 )
}