智能标签

以内联方式放在文本中、表示日期、人员或链接的圆角小标签。每个标签都是一个整体，不能逐字编辑，并且在人们看到的文本旁边保存一个机器可读的值，例如 "Nov 11, 2026" 背后的 2026-11-11，或者姓名背后的用户 ID。

句子 Review with Maria Garcia before Nov 11, 2026. Spec: richtexteditor.com/docs/quick-start，其中姓名、日期和地址各是一个带图标的彩色圆角标签 — 从两个对话框插入的人员标签（紫色）、日期标签（青色）和链接标签（绿色）。

启用

该功能由 smartchips.js 插件提供（也包含在 plugins/all_plugins.js 中）。它添加了两个命令：

insertdatechip（工具提示为 "Date Chip"）：一个日期选择器。默认工具栏把它放在 "More"（⋮）菜单中。
insertchip（工具提示为 "Smart Chip"）：一个带有 Date、Person 和 Link 选项卡的对话框。它不在任何内置工具栏中；请把它添加到您的工具栏，或者使用斜杠菜单中的 "Smart chip"。

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

<div id="div_editor1"><p>Review with </p></div>
<script>
var people = [
  { label: "Maria Garcia", value: "user:1042" },
  { label: "Mark Chen", value: "user:2077" },
  { label: "Priya Nair", value: "user:3310" }
];
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertdatechip,insertchip}|{undo,redo}",
  chipResolver: function (query, type) {
    if (type !== "person") return Promise.resolve([]);
    var q = query.toLowerCase();
    return Promise.resolve(people.filter(function (p) { return p.label.toLowerCase().indexOf(q) !== -1; }));
  }
});
</script>

在真实的应用中，解析器会调用您的用户目录并返回匹配结果。

选项

选项	默认值	作用
`chipResolver`	`null`	`function (query, type)`，其中 `type` 为 `"person"` 或 `"link"`。返回一个解析为 `[{ label, value, href }]` 的 Promise；作者输入时，最多显示六个建议。`label` 是标签文字，`value` 保存在 `data-rte-chip-value` 中，`href` 是链接标签的链接地址。
`chipDateFormat`	`null`	返回日期标签文字的 `function (date)`。没有它时，在英文页面上文字为 "Nov 11, 2026"；使用非英语语言包（`text_uilocale`）时，则是 `Intl.DateTimeFormat` 给出的该区域设置的短日期格式。
`text_insertdatechip`、`text_insertchip`	`"Date Chip"`、`"Smart Chip"`	按钮工具提示。

var editor1 = new RichTextEditor("#div_editor1", {
  chipDateFormat: function (d) {
    return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
  }
});

使用这一设置时，Today 按钮显示为 "4 November 2026"，并插入了带有这段文字的标签；保存的值仍然是 2026-11-04。

使用方法

日期标签。Date 对话框提供 Today、Tomorrow、Yesterday 和 Next week，每项都显示其日期，另有一个日期字段用于选择其他任何日期。值始终是浏览器本地时间的 YYYY-MM-DD。
人员标签。输入姓名并按 Insert，或者点击一个建议。没有解析器时，输入的姓名既是标签也是值。
链接标签。输入一个地址。纯域名会加上 https://；javascript:、data:、vbscript: 和 file: 地址会被拒绝，字段会要求输入有效的 http(s) URL。标签显示不带 https:// 的地址，并在新标签页中打开它。
通过脚本：editor1.execCommand("insertdatechip") 和 editor1.execCommand("insertchip") 会打开这些对话框。

注意事项

插件只有这三种标签类型。没有文件或地点标签，解析器可能返回的 icon 字段也不会被使用。
标签插入之后就固定不变。点击日期标签不会打开选择器，之后也没有任何机制更新其文字（"Today" 标签会一直保留创建时的日期）。要修改标签，请删除它并插入一个新标签。

保存的标记，来自上图（图标已缩短）：

<span class="rte-chip rte-chip-person" data-rte-chip="person" data-rte-chip-value="user:1042" contenteditable="false" style=""><span class="rte-chip-icon"><svg …>…</svg></span><span class="rte-chip-label">Maria Garcia</span></span>
<span class="rte-chip rte-chip-date" data-rte-chip="date" data-rte-chip-value="2026-11-11" contenteditable="false" style="">…<span class="rte-chip-label">Nov 11, 2026</span></span>
<a class="rte-chip rte-chip-link" data-rte-chip="link" data-rte-chip-value="https://richtexteditor.com/docs/quick-start" contenteditable="false" href="https://richtexteditor.com/docs/quick-start" target="_blank" rel="noopener noreferrer" style="">…<span class="rte-chip-label">richtexteditor.com/docs/quick-start</span></a>

每个标签后面都跟着一个零宽空格，以便光标可以停在它之后。请在服务器上读取 data-rte-chip 和 data-rte-chip-value，找出提到了谁或设置了哪个日期。

标签的颜色由插件只在编辑器内部添加的样式表提供。请在显示内容的页面上为 .rte-chip、.rte-chip-date、.rte-chip-person 和 .rte-chip-link 添加规则。
净化程序必须保留带有 class 和 data-rte-chip* 属性的 span 和 a，以及小的内联 svg 图标（或者删除 rte-chip-icon span）。
如需在输入时使用 @提及，请参阅提及。

相关内容：富内容块演示、书签卡片。