快速入门

1. 获取编辑器

有三种途径。CDN 完全不需要安装，是看到编辑器运行起来最快的方式；另外两种是生产部署所采用的方式。

方式 A——下载授权版打包文件

访问 /download，获取适用于您所用框架的打包文件。把它解压到您的站点中，使编辑器位于 /richtexteditor/：

your-site/
├── richtexteditor/
│   ├── rte.js                       ← protected production build (~410 KB)
│   ├── rte_theme_default.css
│   ├── plugins/
│   │   ├── all_plugins.js           ← AI Toolkit, comments, slash, mentions, etc.
│   │   ├── aitoolkit.css
│   │   ├── crdt-engine.min.js       ← Per-node Yjs CRDT (load only if you use collab)
│   │   └── ...
│   └── lang/                        ← optional translations
└── your-page.html

方式 B——npm（推荐）

npm install @richscripts/richtexteditor

# or scaffold a complete working example app:
npm create @richscripts/richtexteditor my-app -- --react   # also: --vue, --angular, --svelte

然后在构建流程中导入样式和打包文件：

// Side-effect import attaches `RichTextEditor` to `window`.
import "@richscripts/richtexteditor/richtexteditor/rte.js";
import "@richscripts/richtexteditor/richtexteditor/plugins/all_plugins.js";

// Or via the typed React wrapper (Vue / Angular wrappers shipped too):
import { RichTextEditorComponent } from "@richscripts/richtexteditor/react";

方式 C——CDN，无需安装

jsDelivr 和 unpkg 都镜像了已发布的 npm 包，因此在一个空 HTML 文件中加两个标签就能得到一个可用的编辑器——无需下载、无需构建步骤、无需账户。把下面的代码粘贴到 CodePen 中即可运行：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/rte.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
  var editor1 = new RichTextEditor("#div_editor1");
</script>

这样就有了核心编辑器及其工具栏。再加一个标签即可获得完整的插件集——AI Toolkit、批注、斜杠命令、提及、布局表格等：

<script src="https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/plugins/all_plugins.min.js"></script>

一行可选的代码。编辑区域会在您自己的源上请求它的内容样式表 /richtexteditor/runtime/richtexteditor_content.css，而只使用 CDN 的页面上没有这个文件，因此您会在网络面板中看到一个 404。这不会造成任何问题——编辑器以内联方式携带了同样的默认样式，无论哪种情况编辑区域都有样式——但您可以把它指向 CDN 上的副本，这个请求就会消失：

var editor1 = new RichTextEditor("#div_editor1", {
  contentCssUrl: "https://cdn.jsdelivr.net/npm/@richscripts/richtexteditor@2.16.0/richtexteditor/runtime/richtexteditor_content.css"
});

固定版本。上面的每个路径都有意写明了 @2.16.0：固定版本的 URL 是不可变的，会被缓存一年，因此您的页面不会在不知情的情况下发生变化。@2 会解析为最新的 2.x 版本，在评估期间很有用，但在生产环境中并不明智。把主机换成 https://unpkg.com/，同样的路径也能使用。

或者从我们的域名提供。同样的文件也发布在 cdn.richtexteditor.com 上——与本站自身运行的构建逐字节相同，缓存在 Cloudflare 的边缘节点，您和我们之间没有任何第三方：

<link rel="stylesheet" href="https://cdn.richtexteditor.com/richtexteditor/rte_theme_default.min.css" />
<script src="https://cdn.richtexteditor.com/richtexteditor/rte.js"></script>
<script src="https://cdn.richtexteditor.com/richtexteditor/plugins/all_plugins.min.js"></script>

代价在于版本固定，而且方向正好相反。这些路径不带版本号，因此总是提供当前版本，您无法让页面停留在旧版本上；浏览器会被告知每四小时重新检查一次。上面的 jsDelivr URL 按版本不可变，如果您需要在几个月后重现某个构建，这正是您想要的。如果不想在页面中引入第三方，请使用 cdn.richtexteditor.com；如果需要把版本固定下来，请使用固定版本的 jsDelivr URL。

上线之前有两点值得了解。CDN 是为您的页面提供文件的第三方——用于试用、原型和问题报告很方便，但上面的自托管方式才能让编辑器完全留在您自己的基础设施中，而这正是永久授权的意义所在。此外，CDN 改变的是文件到达浏览器的方式，而不是您被授权如何使用这些文件；请参阅 /license。

2. 添加脚本并创建第一个编辑器

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="div_editor1">Hello RichTextEditor</div>
<script>
    var editor = new RichTextEditor("#div_editor1");
</script>

这样就有了一个使用默认工具栏、可以正常工作的编辑器。在浏览器中打开它，开始输入吧。

3. 自定义工具栏

把一个配置对象作为第二个参数传入：

var editor = new RichTextEditor("#div_editor1", {
    toolbar:    "basic",      // "basic" | "full" | "mobile" | "custom"
    height:     "500px",
    showStatistics:  true,    // word / character count in the bottom bar
    showFloatTextToolBar: true
});

如需使用显式分组的自定义工具栏：

var editor = new RichTextEditor("#div_editor1", {
    toolbar: "custom",
    toolbar_custom:
        "{bold,italic,underline}|" +
        "{insertorderedlist,insertunorderedlist}|" +
        "{insertlink,insertimage}|" +
        "{aiassist,aichat}|" +
        "{undo,redo}"
});

所有命令名称见工具栏与菜单项参考。

4. 读取和写入内容

// Get the current HTML
var html = editor.getHTMLCode();

// Replace the editor's content
editor.setHTMLCode("<p>New content</p>");

// Get plain text (no markup)
var text = editor.getPlainText();

// Get a structured-content JSON document (lossless round-trip with setJSON())
var json = editor.getJSON();
editor.setJSON(json);

5. 通过表单提交内容

如果编辑器位于 <form> 中，RichTextEditor 会自动把编辑器的 HTML 写入一个与编辑器容器 id 对应的隐藏字段。在服务器端，像读取任何其他表单字段一样从请求中读取它即可。对于动态提交，请在提交处理函数中调用 editor.getHTMLCode()：

document.getElementById("save").addEventListener("click", function () {
    fetch("/api/save", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({ html: editor.getHTMLCode() })
    });
});

6. 选择下一步