Intelligente Chips

Kleine abgerundete Beschriftungen für ein Datum, eine Person oder einen Link, eingebettet in den Text. Jeder Chip ist ein einzelnes Stück, das nicht Buchstabe für Buchstabe bearbeitet werden kann und neben dem Text, den die Leute sehen, einen maschinenlesbaren Wert speichert, z2026-11-11hinter"Nov 11, 2026"oder eine Benutzer-ID hinter einem Namen.

Schalten Sie es ein

Die Funktion ist diesmartchips.jsPlugin (auch inplugins/all_plugins.js). Es fügt zwei Befehle hinzu:

• insertdatechip(Tooltip"Date Chip"): eine Datumsauswahl. Die Standardsymbolleiste enthält es in der"More"(⋮) Menü.
• insertchip(Tooltip"Smart Chip"): ein Dialog mit den Registerkarten Datum, Person und Link. Es gibt keine integrierte Symbolleiste; Fügen Sie es zu Ihrem hinzu oder verwenden Sie es"Smart chip"imSlash-Menü.

<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>

In einer echten App würde der Resolver Ihr Benutzerverzeichnis aufrufen und seine Übereinstimmungen zurückgeben.

Optionen

Option	Standard	Was es bewirkt
chipResolver	null	function (query, type), WotypeIst"person"oder"link". Geben Sie ein Versprechen von zurück[{ label, value, href }]; Bis zu sechs werden als Vorschläge angezeigt, während der Autor sie eingibt.labelist der Chiptext,valueist darin gespeichertdata-rte-chip-value, hrefist die Link-Adresse für Link-Chips.
chipDateFormat	null	function (date) gibt den Text eines Datumschips zurück. Ohne diese Angabe lautet der Text auf einer englischen Seite "Nov 11, 2026"; Bei einem nicht-englischen Sprachpaket (text_uilocale) ist es das kurze Datum dieses Gebietsschemas von Intl.DateTimeFormat.
text_insertdatechip, text_insertchip	"Date Chip", "Smart Chip"	Schaltflächen-Tooltips.

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

Damit lautete die Schaltfläche „Heute“ "4 November 2026" und ein Chip mit diesem Text wurde eingefügt. Der gespeicherte Wert blieb 2026-11-04.

Verwenden

• Datumschip. Das Datumsdialogfeld bietet „Heute“, „Morgen“, „Gestern“ und „Nächste Woche“ mit jeweils eigenem Datum sowie ein Datumsfeld für jeden anderen Tag. Der Wert ist immer YYYY-MM-DD in der Ortszeit des Browsers.
• Personen-Chip. Geben Sie einen Namen ein und drücken Sie „Einfügen“ oder klicken Sie auf einen Vorschlag. Ohne einen Resolver ist der eingegebene Name sowohl die Bezeichnung als auch der Wert.
• Link-Chip. Geben Sie eine Adresse ein. Eine nackte Domain erhält https://; javascript:-, data:-, vbscript:- und file:-Adressen werden abgelehnt und das Feld fragt nach einer gültigen http(s)-URL. Der Chip zeigt die Adresse ohne https:// an und öffnet sie in einem neuen Tab.
• Aus dem Skript: editor1.execCommand("insertdatechip") und editor1.execCommand("insertchip") öffnen die Dialoge.

Wissenswertes

• Das Plugin verfügt nur über diese drei Chiptypen. Es gibt keine Datei- oder Ortschips und das Feld icon, das ein Resolver möglicherweise zurückgibt, wird nicht verwendet.
• Ein Chip ist nach dem Einsetzen fixiert. Durch Klicken auf einen Datumschip wird keine Auswahl geöffnet, und der Text wird später nicht aktualisiert (ein "Today"-Chip behält das Datum, an dem er erstellt wurde). Um eines zu ändern, löschen Sie es und fügen Sie ein neues ein.
• Gespeichertes Markup, aus dem Bild oben (Symbole gekürzt):

  <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>​

  Auf jeden Chip folgt ein Leerzeichen mit der Breite Null, sodass die Einfügemarke dahinter stehen kann. Lesen Sie data-rte-chip und data-rte-chip-value auf Ihrem Server, um herauszufinden, wer genannt wurde oder welches Datum festgelegt wurde.
• Die Chipfarben sind ein Stylesheet, das das Plugin nur im Editor hinzufügt. Fügen Sie der Seite, auf der der Inhalt angezeigt wird, Regeln für .rte-chip, .rte-chip-date, .rte-chip-person und .rte-chip-link hinzu.
• Desinfektionsmittel müssen span und a mit den Attributen class und data-rte-chip* sowie die kleinen Inline-Symbole svg beibehalten (oder weglassen). rte-chip-icon span).
• Informationen zu @-Erwähnungen während der Eingabe finden Sie unter Erwähnungen.

Verwandt: Rich Blocks Demo, Lesezeichenkarten.