Mathematische Gleichungen

Ein Gleichungsdialog: Geben Sie TeX oder LaTeX ein, sehen Sie sich eine Live-Vorschau an und fügen Sie die Gleichung inline in den Text ein. Der Editor enthält keinen mathematischen Renderer. es nutztKaTeXoderMathJaxwenn Ihre Seite eine lädt und die TeX-Quelle so oder so speichert.

Schalten Sie es ein

Die Funktion ist diemathdialog.jsPlugin (auch inplugins/all_plugins.js). Das Symbolleistenelement istinsertmath(Tooltip"Equation"). Die Standardsymbolleiste enthält es in der"More"(⋮) Menü; in Ihrer eigenen Symbolleiste hinzufügeninsertmath. LadenKaTeXvor dem Editor, um gesetzte Gleichungen zu erhalten:

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

Der Bearbeitungsbereich ist also ein eigenes DokumentKaTeXDas Stylesheet auf Ihrer Seite erreicht es nicht. Ohne die letzten vier Zeilen wird jede Gleichung im Editor zweimal angezeigt: einmal gesetzt und einmal alsKaTeX's versteckter Barrierefreiheitstext.

Optionen

Option	Standard	Was es bewirkt
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"]	Die Beispielschaltflächen unter der Eingabe. Ein leeres Array zeigt keine an.
text_insertmath, text_insertmathtitle, text_insertmathlabel, text_insertmathpreview	"Equation", "Insert / edit equation", "TeX / LaTeX", "Preview"	Schaltflächen-Tooltip, Dialogtitel und Beschriftungen.
text_ma_norenderer	"No KaTeX/MathJax detected on the page — …"	Der Hinweis wird angezeigt, wenn kein Renderer gefunden wird.

Benutze es

• Klicken Sie auf die Schaltfläche (oder editor1.execCommand("insertmath") oder "Equation" im Slash-Menü), geben Sie TeX ein und dann Einfügen. Die Gleichung wird an der Einfügemarke eingefügt, inline mit dem Text.
• Bearbeiten. Setzen Sie die Einfügemarke in eine Gleichung und öffnen Sie das Dialogfeld erneut: Es zeigt das TeX dieser Gleichung und auf der Schaltfläche steht „Aktualisieren“.
• Renderer. Das Plugin sucht zuerst nach window.katex, dann nach window.MathJax mit typesetPromise (MathJax 3).
  • KaTeX : Die Vorschau und die Gleichungen im Dokument werden gesetzt.
  • MathJax 3: Die Vorschau ist gesetzt, aber in unserem Test mit MathJax 3.2.2 blieb die Gleichung im Dokument als $x^2 + 1$-Text erhalten. Verwenden Sie KaTeX, wenn Sie während der Bearbeitung Gleichungen setzen möchten.
  • Weder noch: Im Dialogfeld wird angezeigt, dass kein Renderer gefunden wurde, in der Vorschau wird $A = \pi r^2$ angezeigt und die Gleichung wird als Text zwischen Dollarzeichen gespeichert.
• editor1.renderMath() setzt jede Gleichung im Dokument. Mit setHTMLCode geladener Inhalt wird erst gesetzt, wenn Sie ihn aufrufen.

Wissenswertes

• Die TeX-Quelle wird immer in data-tex gespeichert. Ohne Renderer lautet der gespeicherte HTML-Code:

  <p>The area of a circle is<span class="rte-math-inline" data-tex="A = \pi r^2">$A = \pi r^2$</span>​ </p>

  Auf jede Gleichung folgt ein Leerzeichen mit der Breite Null, sodass die Einfügemarke dahinter platziert werden kann.
• Mit KaTeX enthält der gespeicherte HTML-Code auch das von KaTeX generierte Markup innerhalb des Spans (4,6 KB HTML für die beiden Gleichungen im Bild), und der MathML-Teil davon wird entfernt, sodass nur der Text übrig bleibt. Behandeln Sie data-tex als Quelle der Wahrheit und setzen Sie es erneut dort, wo Sie den Inhalt anzeigen:

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

• Gespeichertes KaTeX-Markup, das wieder in den Editor geladen wird, wird nicht verdoppelt; Jede Gleichung enthält noch eine gesetzte Kopie.
• Wenn Sie $a^2$ direkt in den Text eingeben, wird keine Gleichung erstellt. Nur der Dialog funktioniert.
• Gleichungen sind inline. Es gibt keinen separaten Anzeigemodus (zentriert, eigene Zeile).
• KaTeX und MathJax werden in diesen Beispielen von einem CDN geladen. Hosten Sie die Dateien selbst, wenn die Seite offline oder unter einer strengen Inhaltssicherheitsrichtlinie funktionieren muss.
• Desinfektionsmittel müssen span mit seinen Attributen class und data-tex beibehalten.

Verwandt: MathType (Wiris)-Demo, getDocument, Referenz zu Symbolleistenelementen.