Início rápido do editor React: testar e ler HTML de formulários

Editor React com salvamento, restauração e saída HTML

Execute o ZIP React, verifique edição e salvamento local e adapte um formulário sem misturar imports ZIP e npm.

Comece pelo download

Comece pelo download

Extraia o ZIP React e abra um terminal na pasta com package.json e package-lock.json. Use Node.js 22.12 ou posterior com npm e confira avisos de requisitos dos pacotes. Não abra index.html diretamente. Mantenha o lockfile e instale com 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

Abra a URL exibida pelo Vite; a porta pode mudar se estiver ocupada. Confira primeiro o projeto sem alterações. O ZIP contém src/RichTextEditor.jsx, src/richTextEditorBridge.js e public/richtexteditor.

Confira o primeiro fluxo

Digite e confira as saídas HTML, Markdown e JSON. Clique em Save, recarregue e clique em Load saved. O salvamento fica apenas no localStorage deste navegador, não em banco ou conta compartilhada. Mudar host ou porta muda a origem de armazenamento. Guarde outra cópia de rascunhos importantes.

Leia o HTML atual no formulário

Em uma cópia do projeto, substitua src/App.jsx pelo exemplo. Ele importa o componente local do ZIP, espera a prontidão e lê o HTML no envio. React mostra a prévia como texto. Editar limpa a saída antiga sem remontar o editor. Não envia requisições nem salva em 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>
  );
}

Separe ZIP e npm

./RichTextEditor é o componente local, não o export nomeado de @richscripts/richtexteditor/react. Para npm siga a documentação correspondente sem duplicar componentes ou scripts. Verifique se /richtexteditor/rte.js, rte_theme_default.css e plugins/all_plugins.js retornam arquivos, não o index.html do SPA. Em subcaminhos, alinhe assetBasePath e a localização pública.

Compile e conecte a aplicação

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

Depois do teste de desenvolvimento, compile e confira a URL de prévia exibida. Vite preview é para aceitação local, não hospedagem de produção. A API de salvamento deve autorizar o registro, validar e sanitizar HTML e confirmar o resultado. Upload de imagem não salva o documento. Leia IMAGE-UPLOAD.md antes do image-server e não coloque chaves privadas no cliente.

Leia a seguir