Equações matemáticas

Uma caixa de diálogo de equações: digite TeX ou LaTeX, veja uma prévia ao vivo e insira a equação inline no texto. O editor não inclui um renderizador de matemática; ele usa KaTeX ou MathJax se a sua página carregar um deles, e armazena o código-fonte TeX de qualquer forma.

Ative o recurso

O recurso é o plugin mathdialog.js (também incluído em plugins/all_plugins.js). O item da barra de ferramentas é insertmath (dica de ferramenta "Equation"). A barra de ferramentas padrão o traz no menu "More" (⋮); na sua própria barra de ferramentas, adicione insertmath. Carregue o KaTeX antes do editor para ter equações tipografadas:

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

A área de edição é um documento separado; por isso, a folha de estilo do KaTeX na sua página não chega até ela. Sem as quatro últimas linhas, cada equação aparece duas vezes no editor: uma vez tipografada e outra como o texto oculto de acessibilidade do KaTeX.

Opções

Opção	Padrão	O que faz
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"]	Os botões de exemplo abaixo do campo. Um array vazio não mostra nenhum.
text_insertmath, text_insertmathtitle, text_insertmathlabel, text_insertmathpreview	"Equation", "Insert / edit equation", "TeX / LaTeX", "Preview"	Dica de ferramenta do botão, título da caixa de diálogo e rótulos.
text_ma_norenderer	"No KaTeX/MathJax detected on the page — …"	A observação exibida quando nenhum renderizador é encontrado.

Como usar

• Clique no botão (ou use editor1.execCommand("insertmath"), ou "Equation" no menu de barra), digite o TeX e clique em Insert. A equação entra na posição do cursor, inline com o texto.
• Edição. Coloque o cursor em uma equação e abra a caixa de diálogo de novo: ela mostra o TeX dessa equação, e o botão passa a se chamar Update.
• Renderizadores. O plugin procura primeiro window.katex e depois window.MathJax com typesetPromise (MathJax 3).
  • KaTeX: a prévia e as equações no documento são tipografadas.
  • MathJax 3: a prévia é tipografada, mas no nosso teste com o MathJax 3.2.2 a equação no documento continuou como o texto $x^2 + 1$. Use o KaTeX se quiser equações tipografadas durante a edição.
  • Nenhum dos dois: a caixa de diálogo diz que nenhum renderizador foi encontrado, a prévia mostra $A = \pi r^2$ e a equação é armazenada como texto entre cifrões.
• editor1.renderMath() tipografa todas as equações do documento. Conteúdo carregado com setHTMLCode não é tipografado até você chamá-lo.

O que você precisa saber

• O código-fonte TeX é sempre mantido em data-tex. Sem um renderizador, o HTML salvo é:

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

  Um espaço de largura zero vem depois de cada equação, para que o cursor possa ser colocado depois dela.
• Com o KaTeX, o HTML salvo também contém a marcação gerada pelo KaTeX dentro do span (4.6 KB de HTML para as duas equações da imagem), e a parte em MathML é removida, restando apenas o texto dela. Trate data-tex como a fonte da verdade e tipografe-o de novo onde você exibir o conteúdo:

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

• A marcação do KaTeX salva e carregada de volta no editor não é duplicada; cada equação continua com uma única cópia tipografada.
• Digitar $a^2$ diretamente no texto não cria uma equação. Só a caixa de diálogo faz isso.
• As equações são inline. Não há um modo de exibição separado (centralizado, em linha própria).
• Nestes exemplos, o KaTeX e o MathJax são carregados de uma CDN. Hospede os arquivos você mesmo se a página precisar funcionar offline ou com uma Content Security Policy rígida.
• Os sanitizadores precisam manter span com os atributos class e data-tex.

Relacionados: demonstração do MathType (Wiris), getDocument, referência de itens da barra de ferramentas.