Ecuaciones matemáticas

Un cuadro de diálogo para ecuaciones: escribe TeX o LaTeX, consulta una vista previa en vivo e inserta la ecuación en línea con el texto. El editor no incluye un motor de renderizado matemático; usa KaTeX o MathJax si tu página carga alguno y conserva el código fuente TeX en cualquier caso.

Cómo activarlo

Esta función la ofrece el plugin mathdialog.js (también incluido en plugins/all_plugins.js). El elemento de la barra de herramientas es insertmath (texto de ayuda "Equation"). La barra predeterminada lo incluye en el menú "More" (⋮); para usarlo en tu propia barra, añade insertmath. Carga KaTeX antes del editor para obtener ecuaciones con formato matemático:

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

El área de edición es un documento independiente, así que la hoja de estilos de KaTeX en tu página no llega a ella. Sin las últimas cuatro líneas, cada ecuación se muestra dos veces en el editor: una con formato matemático y otra como el texto de accesibilidad oculto de KaTeX.

Opciones

Opción	Valor predeterminado	Función
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"]	Los botones de ejemplo bajo el campo de entrada. Un arreglo vacío no muestra ninguno.
text_insertmath, text_insertmathtitle, text_insertmathlabel, text_insertmathpreview	"Equation", "Insert / edit equation", "TeX / LaTeX", "Preview"	Texto de ayuda del botón, título y etiquetas del cuadro de diálogo.
text_ma_norenderer	"No KaTeX/MathJax detected on the page — …"	La nota que se muestra cuando no se encuentra ningún motor de renderizado.

Cómo usarlo

• Haz clic en el botón (o usa editor1.execCommand("insertmath")o "Equation" en el menú de comandos con barra), escribe TeX y pulsa Insert. La ecuación se inserta en la posición del cursor, en línea con el texto.
• Edición. Coloca el cursor en una ecuación y vuelve a abrir el cuadro de diálogo: muestra el TeX de esa ecuación y el botón dice Update.
• Motores de renderizado. El plugin busca primero window.katex y después window.MathJax con typesetPromise (MathJax 3).
  • KaTeX: tanto la vista previa como las ecuaciones del documento se muestran con formato matemático.
  • MathJax 3: la vista previa se muestra con formato, pero en nuestra prueba con MathJax 3.2.2 la ecuación del documento siguió como texto $x^2 + 1$ . Usa KaTeX si quieres ecuaciones con formato durante la edición.
  • Ninguno: el cuadro de diálogo indica que no se encontró un motor, la vista previa muestra $A = \pi r^2$y la ecuación se guarda como texto entre signos de dólar.
• editor1.renderMath() renderiza todas las ecuaciones del documento. El contenido cargado con setHTMLCode no se renderiza hasta que lo llames.

Aspectos a tener en cuenta

• El código fuente TeX siempre se conserva en data-tex. Sin un motor de renderizado, el HTML guardado es:

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

  Después de cada ecuación hay un espacio de ancho cero para que pueda colocarse el cursor tras ella.
• Con KaTeX, el HTML guardado también contiene el marcado generado por KaTeX dentro del span (4.6 KB de HTML para las dos ecuaciones de la imagen), y se elimina su parte MathML, conservando solo el texto. Considera data-tex como la fuente de verdad y vuelve a renderizarlo donde muestres el contenido:

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

• El marcado KaTeX guardado que se vuelve a cargar en el editor no se duplica; cada ecuación sigue teniendo una sola copia con formato.
• Escribir $a^2$ directamente en el texto no crea una ecuación. Solo lo hace el cuadro de diálogo.
• Las ecuaciones son en línea. No hay un modo separado de presentación (centrado y en su propia línea).
• En estos ejemplos, KaTeX y MathJax se cargan desde una CDN. Aloja los archivos tú mismo si la página debe funcionar sin conexión o con una política de seguridad de contenido estricta.
• Los sanitizadores deben conservar span con sus atributos class y data-tex .

Relacionado: demo de MathType (Wiris), getDocument, referencia de elementos de la barra de herramientas.