Puces intelligentes

Petites étiquettes arrondies représentant une date, une personne ou un lien dans le texte. Chaque puce forme un tout qui ne peut pas être modifié lettre par lettre et conserve une valeur lisible par machine à côté du texte visible, comme 2026-11-11 derrière « Nov 11, 2026 » ou un identifiant utilisateur derrière un nom.

Activation

Cette fonctionnalité est fournie par le plugin smartchips.js (également inclus dans plugins/all_plugins.js). Il ajoute deux commandes :

• insertdatechip (infobulle « Date Chip ») : un sélecteur de date. La barre par défaut le place dans le menu « More » (⋮).
• insertchip (infobulle « Smart Chip ») : une boîte de dialogue avec les onglets Date, Person et Link. Elle ne figure dans aucune barre intégrée ; ajoutez-la à la vôtre ou choisissez « Smart chip » dans le menu de commandes slash.

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

Dans une application réelle, le résolveur interrogerait votre annuaire et renverrait ses résultats.

Options

Option	Valeur par défaut	Fonctionnement
chipResolver	null	function (query, type), où type vaut "person" ou "link". Renvoyez une Promise de [{ label, value, href }] ; jusqu’à six résultats sont proposés pendant la saisie. label est le texte de la puce, value est enregistré dans data-rte-chip-value, href est l’adresse des puces de lien.
chipDateFormat	null	function (date) renvoyant le texte d’une puce de date. Sans cette fonction, le texte est « Nov 11, 2026 » sur une page anglaise ; avec un module de langue autre que l’anglais (text_uilocale), c’est la date courte de cette langue fournie par Intl.DateTimeFormat.
text_insertdatechip, text_insertchip	"Date Chip", "Smart Chip"	Infobulles des boutons.

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

Avec cette configuration, le bouton Today affichait « 4 November 2026 » et insérait ce texte dans une puce ; la valeur enregistrée restait 2026-11-04.

Utilisation

• Puce de date. La boîte Date propose Today, Tomorrow, Yesterday et Next week, avec les dates correspondantes, ainsi qu’un champ pour tout autre jour. La valeur est toujours YYYY-MM-DD dans le fuseau local du navigateur.
• Puce de personne. Saisissez un nom puis appuyez sur Insert, ou cliquez sur une suggestion. Sans résolveur, le nom saisi sert à la fois de libellé et de valeur.
• Puce de lien. Saisissez une adresse. Un domaine sans protocole reçoit https:// ; javascript:, data:, vbscript: et file: sont refusés et le champ demande une URL http(s) valide. La puce affiche l’adresse sans https:// et l’ouvre dans un nouvel onglet.
• Depuis un script : editor1.execCommand("insertdatechip") et editor1.execCommand("insertchip") ouvrent les boîtes de dialogue.

À savoir

• Le plugin ne propose que ces trois types de puces. Il n’y a pas de puces de fichier ou de lieu, et le champ icon qu’un résolveur peut renvoyer n’est pas utilisé.
• Une puce est fixe après insertion. Cliquer sur une date n’ouvre pas de sélecteur et rien ne met son texte à jour (une puce « Today » conserve la date de sa création). Pour la changer, supprimez-la puis insérez-en une nouvelle.
• Balisage enregistré depuis l’image ci-dessus (icônes abrégées) :

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

  Chaque puce est suivie d’un espace de largeur nulle pour placer le curseur après elle. Lisez data-rte-chip et data-rte-chip-value sur votre serveur pour identifier la personne nommée ou la date définie.
• Les couleurs proviennent d’une feuille de style ajoutée par le plugin uniquement dans l’éditeur. Ajoutez des règles pour .rte-chip, .rte-chip-date, .rte-chip-person et .rte-chip-link à la page d’affichage.
• Les filtres de nettoyage doivent conserver span et a avec class et les attributs data-rte-chip*, ainsi que les petites icônes svg en ligne (ou retirer le span rte-chip-icon ).
• Pour les @mentions pendant la saisie, consultez les mentions.

Voir aussi : démonstration de blocs enrichis, cartes de liens.