React 富文本编辑器快速开始：运行试用并读取表单 HTML
跑通下载的 React 示例，验证编辑与本地保存，再接入小型表单，避免混用 ZIP 和 npm 导入。
从下载示例开始
下载 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 属于下载示例，不是 @richscripts/richtexteditor/react 的具名导出。向现有应用安装 npm 包时，遵循 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开发流程跑通后，构建示例并测试终端打印的预览地址。Vite preview 用于本地验收，不是生产托管服务。真实保存接口必须检查记录权限、验证和清理 HTML，并返回保存确认。图片上传独立处理：上传文件不等于保存文档。启用可选 image-server 前先阅读 ZIP 内的 IMAGE-UPLOAD.md。不要将服务商或存储密钥放进客户端代码。