Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

162
Vistas
Tinymce upload image url in react doesn't work

I am trying to insert image url in my texteditor made in Reactjs and tineymce. But it gives error as:

Uncaught TypeError: Cannot read properties of undefined (reading 'nodeName')

This is my code for editor.

export default function DraftEditor() {
  const editorRef = useRef(null);
 
  const example_image_upload_handler = (blobInfo, progress) =>
    new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open(
        "POST",
        "image_upload_url",
        true
      );

      xhr.upload.onprogress = (e) => {
        progress((e.loaded / e.total) * 100);
      };

      xhr.onload = () => {
        if (xhr.status === 403) {
          reject({ message: "HTTP Error: " + xhr.status, remove: true });
          return;
        }

        if (xhr.status < 200 || xhr.status >= 300) {
          reject("HTTP Error: " + xhr.status);
          return;
        }

        const json = JSON.parse(xhr.responseText);

        if (!json || typeof json.data != "string") {
          reject("Invalid JSON: " + xhr.responseText);
          return;
        }

        resolve(json.data);
      };


      const formData = new FormData();
      formData.append("image", blobInfo.blob(), blobInfo.filename());

      xhr.send(formData);
    });
  return (
    <>
      <Editor
        apiKey={process.env.REACT_APP_TINY}
        onInit={(evt, editor) => (editorRef.current = editor)}
        initialValue={``}
        init={{
          images_upload_handler: example_image_upload_handler,
          plugins: [
            "image",
          ],
          image_title: true,
          file_picker_types: "image",
          automatic_uploads: true,
          content_style:
            "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
          images_file_types: "jpg,svg,png",
          toolbar: "codesample code",
          content_style:
            "body { font-family: 'Courier New', Courier, monospace; font-size: 0.9em }",
        }}
      />
    </>
  );
}

This image upload code is from it's documentation. I am uploading local image to my server and trying to insert the returned link in the editor.

This is my error ss. enter image description here

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.