React リッチテキストエディター入門：試用からフォーム HTML 取得まで

保存と復元、HTML 出力を備えた React 試用エディター

ダウンロードした React サンプルを実行し、編集とローカル保存を確認してフォームにつなぎます。

ダウンロード版から始める

ダウンロード版から始める

React サンプルの ZIP を展開し、package.json と package-lock.json のあるフォルダーでターミナルを開きます。Node.js 22.12 以降と npm を使い、警告があれば依存のエンジン要件を確認します。index.html を直接開かず、ロックファイルを保持して 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

Vite が表示する URL を開きます。既定ポートが使用中なら番号は変わります。独自コードを加える前に元のサンプルを確認します。ZIP には src/RichTextEditor.jsx、src/richTextEditorBridge.js、public/richtexteditor が含まれます。

最初の動作を確認する

入力すると HTML、Markdown、JSON が更新されます。Save を押し、再読み込みして Load saved を押します。保存先はこのブラウザーの localStorage で、データベースや共有アカウントではありません。ホスト名やポートが変わると保存元も変わります。重要な下書きは別に保管してください。

フォームで現在の HTML を読む

展開したサンプルのコピーで src/App.jsx を次の例に置き換えます。ZIP のローカルラッパーを読み込み、準備完了後に現在の HTML を取得します。React はプレビューを文字として描画します。再編集すると古い出力を消し、エディターは再作成しません。通信やサーバー保存は行いません。

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>
  );
}

ZIP と npm の組み込みを区別する

./RichTextEditor は ZIP 内のコンポーネントで、@richscripts/richtexteditor/react の名前付きエクスポートとは異なります。既存アプリで npm を使う場合は対応する手順に従い、ラッパーやスクリプトを重複させないでください。/richtexteditor/rte.js、rte_theme_default.css、plugins/all_plugins.js が SPA の index.html ではなく実際のファイルを返すか確認します。サブパスでは assetBasePath と配信先を合わせます。

ビルドしてアプリにつなぐ

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

開発動作を確認してからビルドし、ターミナルのプレビュー URL を試します。Vite preview はローカル検証用で本番ホスティングではありません。保存 API はレコードの権限、HTML の検証とサニタイズ、完了通知が必要です。画像アップロードは文書保存とは別です。image-server を有効にする前に ZIP の IMAGE-UPLOAD.md を読み、サービスやストレージの秘密鍵をクライアントに置かないでください。

次に読む