Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

159
Visualizações
using react with tinymce and controlling a specific property of a state
let [detail,setDetail] = useState({'details':''}) //Specialized state for Editor element

let {details} = detail

const handleEditorChange = (e)=>{
      setDetail(
         ...detail,
         [e.target.textareaName]:e.target.value
)
}


//returning a jsx (part of the code) focus on Editor, because this where the problem occur: 


<div>
<form onSubmit={(e)=>{handleChange(e)}}>
<input name='name' value={name} onChange={(e)=>{handleChange(e)}}>

<Editor  textareaName='details' onInit={(evt, editor) => editorRef.current = editor} init={{
           section:'textarea',
           height: 500,
           menubar: false,
           toolbar: 'undo redo | formatselect | ' +
           'bold italic backcolor | alignleft aligncenter ' +
           'alignright alignjustify | bullist numlist outdent indent | ' +
           'removeformat | help',
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }} value={detail}  onEditorChange={(e)=>editorHandleChange(e)}/>
</form>
</div>

I have an Editor element from tinymce , this one is used for react I have a state like this for all inputs+Editor:

let [someState,setSomeState] = {'name':,"year":"","detail":""}

now as you see name and year are controlled by normal inputs elements in jsx , but for detail i have to use Editor element, and i really dont know how to track the editor change, plus i dont know how to set detail property in the state someState when submitting , some code for handling the editor change:

let editorHandleChange = (e)=>{
        setdet(
        {
            ...detail,
        textareaName: e.target.value 

    }
        )
}

it is giving me textareaName is undefined in console, same with value any help is appreciated!!

edit: the Editor element has an apiKey, but i hid it here.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

There seems to be a react-wrapper for tinymce, which is described here: https://www.tiny.cloud/docs/tinymce/6/react-cloud/ - in this example, the editor content is logged to the console. Replace the call of console.log with you state setter and you should be done.

If for some reason you can not use the react wrapper, you can also try to change your code in handleEditorChange to access the native event: e.nativeEvent.target.textAreaName. I would prefer using the react-wrapper though because then you don't need to mix up browser events/the browser DOM with virtual events/the virtual DOM.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda