スマートチップ

日付、人物、リンクを表す、小さな角丸のラベルを本文中に置きます。各チップは 1 つのまとまりで、1 文字ずつは編集できません。表示テキストに加え、「Nov 11, 2026」の背後の 2026-11-11 や、名前の背後のユーザー ID のように、機械が読める値を保存します。

有効にする

この機能は smartchips.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。2 つのコマンドを追加します。

• 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 を返すと、入力中に最大 6 件の候補を表示します。label は表示テキスト、value は data-rte-chip-value に保存する値、href はリンクチップの URL です。
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 を押すか、候補をクリックします。リゾルバーがなければ、入力した名前をラベルと値の両方に使います。
• リンクチップ。URL を入力します。スキームのないドメインには https:// を付けます。javascript:、data:、vbscript:、file: の URL は拒否し、有効な http(s) URL の入力を求めます。チップには https:// を省いた URL を表示し、新しいタブで開きます。
• スクリプトでは、editor1.execCommand("insertdatechip") と editor1.execCommand("insertchip") でダイアログを開きます。

注意点

• チップの種類はこの 3 つだけです。ファイルや場所のチップはなく、リゾルバーが 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 を削除します。
• 入力中の @メンションについては、メンションを参照してください。

関連情報：リッチブロックのデモ、ブックマークカード。