数式

TeX や LaTeX を入力してプレビューを確認し、本文中にインラインで数式を挿入するダイアログです。数式レンダラーは含まれません。ページが KaTeX または MathJax を読み込んでいれば利用し、どちらの場合も TeX のソースを保存します。

有効にする

この機能は mathdialog.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ツールバー項目は insertmath（ツールチップは「Equation」）です。既定のツールバーでは「More」（⋮）メニューにあります。独自のツールバーには insertmath を追加します。数式を組版表示するには、エディターより先に KaTeX を読み込みます。

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

編集領域は独立した文書のため、ページ上の KaTeX のスタイルシートは届きません。最後の 4 行がないと、各数式がエディター内で 2 回表示されます。一方は組版済みの数式、もう一方は KaTeX の非表示にすべきアクセシビリティ用テキストです。

オプション

オプション	既定値	動作
`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"]`	入力欄の下のサンプルボタンです。空の配列なら表示しません。
`text_insertmath`, `text_insertmathtitle`, `text_insertmathlabel`, `text_insertmathpreview`	`"Equation"`, `"Insert / edit equation"`, `"TeX / LaTeX"`, `"Preview"`	ボタンのツールチップ、ダイアログのタイトル、ラベルです。
`text_ma_norenderer`	「No KaTeX/MathJax detected on the page — …」	レンダラーが見つからない場合に表示する注記です。

使い方

Insert / edit equation ダイアログ。TeX / LaTeX 欄に解の公式が入り、6 つのサンプルボタン、組版した公式のプレビュー、Cancel と Insert ボタンが表示されています — ダイアログです。サンプルボタンで入力欄に内容を入れられ、入力に応じてプレビューが更新されます。

ボタンをクリックするか、editor1.execCommand("insertmath") を実行するか、スラッシュメニューの「Equation」を選びます。TeX を入力して Insert を押すと、カーソル位置に本文とインラインで数式を挿入します。
編集。数式内にカーソルを置いて再度ダイアログを開くと、その TeX が表示され、ボタンは Update になります。
レンダラー。最初に window.katex を探し、次に typesetPromise を持つ window.MathJax（MathJax 3）を探します。
- KaTeX：プレビューと文書内の数式の両方を組版します。
- MathJax 3：プレビューは組版しますが、MathJax 3.2.2 のテストでは、文書内の数式は $x^2 + 1$ というテキストのままでした。編集中にも組版した数式を表示するには KaTeX を使ってください。
- どちらもない場合：レンダラーが見つからない旨をダイアログに表示し、プレビューには $A = \pi r^2$ を表示します。数式はドル記号で囲んだテキストとして保存します。
editor1.renderMath() は文書内のすべての数式を組版します。setHTMLCode で読み込んだ内容は、このメソッドを呼ぶまで組版されません。

注意点

TeX のソースは常に data-tex に保持します。レンダラーがない場合、保存する HTML は次のとおりです。
```
<p>The area of a circle is<span class="rte-math-inline" data-tex="A = \pi r^2">$A = \pi r^2$</span> </p>
```
各数式の後ろにはゼロ幅スペースを付け、数式の後にカーソルを置けるようにします。

KaTeX を使うと、保存する HTML の span 内にも KaTeX 生成のマークアップが含まれます（画像の 2 つの数式で 4.6 KB の HTML）。そのうち MathML 部分は削除され、テキストだけが残ります。data-tex を正しいソースとして扱い、表示先で再度組版してください。

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

保存した KaTeX のマークアップをエディターに読み戻しても二重にはなりません。各数式は組版済みの表示を 1 つだけ保持します。
本文に直接 $a^2$ と入力しても数式にはなりません。作成できるのはダイアログからだけです。
数式はインラインです。中央揃えの独立した行に置く表示モードはありません。
この例では KaTeX と MathJax を CDN から読み込みます。オフラインや厳格な Content Security Policy の下で使う場合は、ファイルを自分でホストしてください。
サニタイザーでは、span とその class、data-tex 属性を保持する必要があります。