Inicio rápido del editor React: probar y leer HTML del formulario

Editor React con guardado, restauración y salida HTML

Ejecuta el ZIP React, comprueba edición y guardado local y adapta un formulario sin mezclar imports ZIP y npm.

Empieza con la descarga

Empieza con la descarga

Extrae el ZIP React y abre una terminal en la carpeta con package.json y package-lock.json. Usa Node.js 22.12 o posterior con npm y revisa las advertencias de motores. No abras index.html directamente. Conserva el archivo de bloqueo e instala con npm ci.

node --version
npm --version
# Open a terminal in the extracted folder containing package.json.
npm ci
npm run dev -- --host 127.0.0.1

Abre la URL que imprime Vite; el puerto puede cambiar si está ocupado. Comprueba primero el proyecto sin modificar. El ZIP incluye src/RichTextEditor.jsx, src/richTextEditorBridge.js y public/richtexteditor.

Comprueba el primer recorrido

Escribe y verifica que HTML, Markdown y JSON se actualizan. Pulsa Save, recarga y pulsa Load saved. Solo se guarda en localStorage de este navegador, no en una base de datos ni una cuenta compartida. Cambiar host o puerto cambia el origen del almacenamiento. Conserva otra copia de borradores importantes.

Lee el HTML actual desde un formulario

En una copia del proyecto sustituye src/App.jsx por este ejemplo. Importa el componente local del ZIP, espera su disponibilidad y lee HTML al enviar. React muestra la vista previa como texto. Editar borra el resultado anterior sin volver a montar el editor. No envía peticiones ni guarda en un servidor.

import { useRef, useState } from "react";
import RichTextEditor from "./RichTextEditor";

const config = { toolbar: "full", height: "320px" };
export default function App() {
  const editorRef = useRef(null);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState("");
  const [html, setHtml] = useState("");
  function inspect(event) {
    event.preventDefault();
    if (!ready || !editorRef.current) return;
    setHtml(editorRef.current.getHTMLCode());
  }
  return (
    <main style={{ maxWidth: 960, margin: "24px auto", padding: "0 16px" }}>
      <h1>React editor form</h1>
      <form onSubmit={inspect}>
        <div style={{ maxWidth: "100%", overflowX: "auto" }}>
          <RichTextEditor
            ref={editorRef}
            defaultValue="<p>Write a short note.</p>"
            config={config}
            onReady={() => setReady(true)}
            onError={() => {
              setReady(false);
              setError("Editor assets could not load. Check /richtexteditor, then reload.");
            }}
            onChange={() => setHtml("")}
          />
        </div>
        {error && <p role="alert">{error}</p>}
        <button type="submit" disabled={!ready} style={{ minHeight: 44, padding: "8px 16px" }}>
          Inspect HTML
        </button>
        <p>This example reads HTML only. It does not save to a server.</p>
        <pre aria-label="Current HTML" style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{html}</pre>
      </form>
    </main>
  );
}

Separa ZIP y npm

./RichTextEditor es el componente local, no la exportación nombrada de @richscripts/richtexteditor/react. Para npm sigue su documentación sin duplicar componentes o scripts. Comprueba que /richtexteditor/rte.js, rte_theme_default.css y plugins/all_plugins.js devuelvan archivos, no el index.html del SPA. Bajo una subruta, coordina assetBasePath y la ubicación pública.

Compila y conecta la aplicación

npm run build
npm run preview -- --host 127.0.0.1

Tras comprobar desarrollo, compila y prueba la URL de vista previa indicada. Vite preview sirve para aceptación local, no para alojar producción. Una API de guardado debe autorizar el registro, validar y sanear HTML y confirmar el resultado. Subir imágenes no guarda el documento. Lee IMAGE-UPLOAD.md antes de image-server y no pongas claves privadas en el cliente.

Para seguir leyendo