javascript - How to implement TinyMCE to Shared Textarea and Return its Updated State in React?

Question

First thing first, I'm trying to implement tinyMCE to a component from react-bootstrap.

Said component is 'dynamic'. It can be any type of input I desire but when I try to use it as a textarea with tinyMCE, the state does not return any data from said input and my DB updates fail(learned it the hard way).

The first component I'm using it with is called the Edit.js. This input should store the new values on producerData which it does but only when I dont initialize the tinyMCE.

const handleChange = (name) => (e) => {
  setIsBlocking(e.target.value.length > 0)
  setProducerData({ ...producerData, [name]: e.target.value })
};
<FormInput
  id={`text`}
  name={`text`}
  asType={`textarea`}
  handleChange={handleChange('text')}
  value={text}
  plugins={`toolbar`}
/>

With that being said, here it is the FormInput component. I previously mentioned that it works but no necessarily with tinyMCE(that's the reason I currently have it commented) which is what I need:

import React from 'react'
// HELPERS
import { useScript } from '../../helpers/utilities'
// TINYMCE
import Form from 'react-bootstrap/Form'

const FormInput = ({
  id = ``,
  name = ``,
  type = ``,
  asType = ``,
  placeholder = `Write here...`,
  value = ``,
  handleChange,
  plugins = ``,
  classStr = ``,
  required = false,
  disabled = false,
  ariaLabel = ``,
  ariaDescribedby = ``,
  autoComplete = ``,
  children,
}) => {
  // useScript(
  //   'tinyMCE',
  //   `https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/tinymce.min.js`,
  //   'origin',
  //   'head',
  //   false
  // );

  // if (asType === `textarea`) {
  //   window?.tinymce?.init({
  //     selector: `textarea#${id}`,
  //     // skin: `bootstrap`,
  //     branding: false,
  //     height: 300,
  //     plugins: `toc pagebreak charmap textpattern imagetools ${plugins}`,
  //   });
  // }

  return (
    <Form.Control
      {...{
        ...(id && { id: id }),
        ...(name && { name: name }),
        ...(type && { type: type }),
        ...(asType && { as: asType }),
        ...(placeholder && { placeholder: placeholder }),
        ...(handleChange && { onChange: handleChange }),
        ...(value && { value: value }),
        ...(classStr && { className: classStr }),
        ...(required && { required: required }),
        ...(disabled && { disabled: disabled }),
        ...(ariaLabel && `aria-label=${ariaLabel}`),
        ...(ariaDescribedby && `aria-describedby=${ariaDescribedby}`),
        ...(autoComplete && { autoComplete: autoComplete }),
      }}
    >
      {children && children}
    </Form.Control>
  )
}

export default FormInput

Again, if I did not explain myself well: The code above works by itself but I want it to work with TinyMCE

Has anyone here used react-bootstrap and tinyMCE? Thanks!.

question from:https://stackoverflow.com/questions/65944766/how-to-implement-tinymce-to-shared-textarea-and-return-its-updated-state-in-reac

Answer 1

Waitting for answers