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