Équations mathématiques

Une boîte de dialogue permet de saisir du TeX ou LaTeX, de voir l’aperçu et d’insérer l’équation dans le texte. L’éditeur n’inclut aucun moteur de rendu mathématique ; il utilise KaTeX ou MathJax si votre page en charge un, et conserve dans tous les cas la source TeX.

L’éditeur affichant la phrase The area of a circle is A = pi r squared, et les racines d’une équation du second degré x = moins b plus ou moins la racine carrée de b au carré moins 4ac, sur 2a, avec les deux équations mises en forme — Deux équations insérées depuis la boîte de dialogue, affichées avec KaTeX 0.16.11 chargé sur la page.

Activation

Cette fonctionnalité est fournie par le plugin mathdialog.js (également inclus dans plugins/all_plugins.js). L’élément de la barre d’outils est insertmath (infobulle « Equation »). La barre par défaut le place dans le menu « More » (⋮) ; dans votre propre barre, ajoutez insertmath. Chargez KaTeX avant l’éditeur pour obtenir des équations mises en forme :

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/mathdialog.js"></script>

<div id="div_editor1"><p>The area of a circle is </p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertmath}|{undo,redo}"
});
// KaTeX's stylesheet is needed inside the editing area too
var link = editor1.getDocument().createElement("link");
link.rel = "stylesheet";
link.href = "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css";
editor1.getDocument().head.appendChild(link);
</script>

La zone d’édition est un document distinct : la feuille de style KaTeX de la page ne s’y applique pas. Sans les quatre dernières lignes, chaque équation apparaît deux fois dans l’éditeur : une fois mise en forme et une fois sous forme de texte d’accessibilité masqué de KaTeX.

Options

Option	Valeur par défaut	Fonctionnement
`mathDialogSamples`	`["x^2 + y^2 = z^2", "\frac{a}{b}", "\sqrt{x}", "\sum_{i=1}^{n} i", "\int_0^1 x\,dx", "\alpha\beta\gamma"]`	Les boutons d’exemples sous le champ de saisie. Un tableau vide les masque tous.
`text_insertmath`, `text_insertmathtitle`, `text_insertmathlabel`, `text_insertmathpreview`	`"Equation"`, `"Insert / edit equation"`, `"TeX / LaTeX"`, `"Preview"`	Infobulle du bouton, titre de la boîte de dialogue et libellés.
`text_ma_norenderer`	"No KaTeX/MathJax detected on the page — …"	Note affichée lorsqu’aucun moteur de rendu n’est détecté.

Utilisation

La boîte de dialogue Insert / edit equation : un champ TeX / LaTeX contenant la formule du second degré, six boutons d’exemples et un aperçu de la formule au-dessus de Cancel et Insert — La boîte de dialogue. Les boutons d’exemples remplissent le champ ; l’aperçu se met à jour pendant la saisie.

Cliquez sur le bouton (ou utilisez editor1.execCommand("insertmath"), ou « Equation » dans le menu de commandes slash), saisissez du TeX, puis Insert. L’équation est insérée dans le texte à la position du curseur.
Modification. Placez le curseur dans une équation et rouvrez la boîte de dialogue : elle affiche son TeX et le bouton devient Update.
Moteurs de rendu. Le plugin recherche d’abord window.katex, puis window.MathJax avec typesetPromise (MathJax 3).
- KaTeX : l’aperçu et les équations du document sont mis en forme.
- MathJax 3 : l’aperçu est mis en forme, mais dans notre test avec MathJax 3.2.2, l’équation du document est restée du texte $x^2 + 1$ . Utilisez KaTeX si vous souhaitez voir les équations mises en forme pendant l’édition.
- Aucun moteur : la boîte de dialogue signale qu’aucun moteur n’a été détecté, l’aperçu affiche $A = \pi r^2$ , et l’équation est enregistrée sous forme de texte entre signes dollar.
editor1.renderMath() met en forme toutes les équations du document. Le contenu chargé avec setHTMLCode n’est mis en forme qu’après cet appel.

À savoir

La source TeX est toujours conservée dans data-tex. Sans moteur de rendu, le HTML enregistré est :
```
<p>The area of a circle is<span class="rte-math-inline" data-tex="A = \pi r^2">$A = \pi r^2$</span> </p>
```
Un espace de largeur nulle suit chaque équation pour pouvoir placer le curseur après.

Avec KaTeX, le HTML enregistré contient aussi son balisage généré dans le span (4.6 KB de HTML pour les deux équations de l’image) ; la partie MathML est retirée, seul son texte demeure. Considérez data-tex comme la référence et refaites la mise en forme à l’endroit où vous affichez le contenu :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
<script>
document.querySelectorAll(".rte-math-inline[data-tex]").forEach(function (el) {
  katex.render(el.getAttribute("data-tex"), el, { throwOnError: false });
});
</script>

Le balisage KaTeX enregistré puis rechargé dans l’éditeur n’est pas doublé : chaque équation contient toujours une seule version mise en forme.
Saisir $a^2$ directement dans le texte ne crée pas d’équation. Seule la boîte de dialogue le fait.
Les équations sont en ligne. Il n’y a pas de mode d’affichage distinct (centré, sur sa propre ligne).
KaTeX et MathJax sont chargés depuis un CDN dans ces exemples. Hébergez vous-même les fichiers si la page doit fonctionner hors ligne ou avec une politique de sécurité du contenu stricte.
Les filtres de nettoyage doivent conserver span avec ses attributs class et data-tex.

Voir aussi : démonstration MathType (Wiris), getDocument, référence des éléments de la barre d’outils.