此插件仅作为 付费附加组件 提供，用于 TinyMCE 订阅。

Math 插件为用户提供了一种插入复杂公式的方法。

交互式示例

HTML

<textarea id="math_demo">
<h2>定积分的计算。</h2>
		<p>在计算定积分时，重要的是要观察到当已知积分存在时，可以在任意适当选择的子集 <tiny-math-inline formula="S_\delta"></tiny-math-inline> 上计算极限。因此，如果 <tiny-math-inline formula="S_{\delta_1}"></tiny-math-inline>、<tiny-math-inline formula="S_{\delta_2}"></tiny-math-inline> 等是任意序列的和，且满足 <tiny-math-inline formula="\displaystyle\mathop{L}_{n\doteq\infty}\delta_n=0"></tiny-math-inline>，则有</p>
		<tiny-math-block formula="\mathop{L}_{n\doteq\infty} S_{\delta_n} = \int_a^b f(x)dx."></tiny-math-block>
		<p>这种情况的一个例子是，当 <tiny-math-inline formula="\xi_k"></tiny-math-inline> 被取为区间 <tiny-math-inline formula="{x_{k-1}}{x_k}"></tiny-math-inline> 的端点，且所有 <tiny-math-inline formula="\Delta_kx"></tiny-math-inline> 均相等时。于是有</p>
		<tiny-math-block formula="\displaystyle \int_a^b f(x)dx =  \mathop{L}_{n\doteq\infty} \sum_{k=1}^n f(a+k\Delta x)\Delta x,  \text{ where }  \Delta x=\frac{b-a}{n}."></tiny-math-block>
		<p>这一原理的一个简单例子是以下定理的证明。</p>
		<p><em>摘自 <a href="https://www.gutenberg.org/ebooks/18741">Veblen 等人的《无穷小分析导论；单实变量函数》</a></em></p>	
	</textarea>

JS

tinymce.init({
  selector: "textarea#math_demo",
  plugins: [
      "math", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
      "help", "image", "insertdatetime", "link", "lists", "media",
      "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "math | codesample | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});

基本设置

要在编辑器中设置 Math 插件的用户界面：

  • 在编辑器配置的 plugins 选项中添加 math；

例如：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'math',
  toolbar: 'math',
});

有关使用模块打包器打包此插件的信息，请参阅 打包 TinyMCE - 概述。

使用方法

要使用数学元素，请按照以下步骤操作：

  1. 启用 Math 插件

    1. 打开启用了 Math 插件的 TinyMCE 编辑器。

  2. 插入或编辑数学元素

    1. 点击工具栏中的 Math 插件图标。

    2. 这将打开 Math 对话框。

    3. 选择首选的 语言

    4. 在文本区域中输入数学 公式。

    5. 选择首选的 文本换行

  3. 预览并保存

    1. 在 预览 中检查数学公式的输出。

    2. 在 预览 部分查看最终的数学方程。

    3. 点击 Math 对话框中的 保存 按钮。

    4. 数学方程将被插入到编辑器中，并根据所选的 文本换行 进行相应的包裹。

公式标签包裹

  1. Math 对话框会用特定的标签包裹插入的公式。

  2. 标签的选择取决于对话框中选择的 文本换行 选项：

    1. 对于块级（上方和下方有文本）文本换行，使用的标签是 <tiny-math-block>。

    2. 对于内联（与文本内联）文本换行，使用的标签是 <tiny-math-inline>。

访问 https://katex.org/docs/supported 以获取在选择“Language (LaTeX)”后插入数学方程时支持的符号和函数的完整列表。

工具栏按钮

Math 插件提供以下工具栏按钮：

工具栏按钮标识符描述

math

打开数学模态对话框。

这些工具栏按钮可以通过以下方式添加到编辑器中：

菜单项

Math 插件提供以下菜单项：

菜单项标识符默认菜单位置描述

math

插入

打开数学模态对话框。

这些菜单项可以通过以下方式添加到编辑器中：

选项

extended_mathml_elements

此选项允许在编辑器内容中保留特定的额外 MathML 元素列表，即使它们不在默认的 DOMPurify 允许列表中。此设置仅影响 MathML 标记中使用的元素，对常规 HTML 内容无效。

类型： 字符串 数组

默认值： []（空数组）

示例：使用 extended_mathml_elements

tinymce.init({
  selector: 'textarea',
  extended_mathml_elements: [ 'mn', 'mspace' ]
});
保留元素的 MathML 示例
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mi>a</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mn>1</mn>
          <mo>+</mo>
          <mn>√2</mn>
        </mrow>
        <mn>3</mn>
      </mfrac>
      <mspace width="1em"></mspace>
      <mo>&#x222A;</mo>
      <mspace width="1em"></mspace>
      <msup>
        <mn>5</mn>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>
</p>

extended_mathml_attributes

此选项允许在编辑器内容中保留特定的额外 MathML 属性列表，即使它们不在默认的 DOMPurify 允许列表中。此设置仅影响 MathML 标记中使用的属性，对常规 HTML 内容无效。

类型： 字符串 数组

默认值： []（空数组）

示例：使用 extended_mathml_attributes

tinymce.init({
  selector: 'textarea',
  extended_mathml_attributes: [ 'linebreak', 'encoding' ]
});
保留属性的 MathML 示例
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow linebreak="newline" encoding="utf8">
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo>&#x2212;</mo>
          <mi>b</mi>
          <mo>&#x00B1;</mo>
          <msqrt>
            <mrow>
              <msup>
                <mi>b</mi>
                <mn>2</mn>
              </msup>
              <mo>&#x2212;</mo>
              <mn>4</mn>
              <mo>&#x2062;</mo>
              <mi>a</mi>
              <mo>&#x2062;</mo>
              <mi>c</mi>
            </mrow>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mo>&#x2062;</mo>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow>
  </math>
</p>

命令

Math 插件提供了以下 TinyMCE 命令。

命令描述

Math

此命令打开数学对话框。

示例
tinymce.activeEditor.execCommand('Math');