MathQuill是一个网络公式编辑器，旨在使键入数学变得简单而美观，在输入数学公式应用场景中，非常实用。

MathQuill有一个简单的界面。这个简短的示例创建一个 MathQuill 元素并呈现，然后读取给定的输入：

var htmlElement = document.getElementById('some_id');var config = {  handlers: { edit: function(){ ... } },  restrictMismatchedBrackets: true};var mathField = MQ.MathField(htmlElement, config);mathField.latex('2^{\frac构造函数最新版本}'); // Renders the given LaTeX in the MathQuill fieldmathField.latex(); // => '2^{\frac构造函数最新版本}'

下载使用

MathQuill 依赖于 jQuery 1.5.2+。

加载 MathQuill 类似的东西（顺序很重要）：

<link rel="stylesheet" href="/path/to/mathquill.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="/path/to/mathquill.js"></script><script>var MQ = MathQuill.getInterface(2);</script>

现在，您可以在 上调用我们的 API 方法。MQ

基本用法

MathQuill 实例是从 HTML 元素创建的。有关构造函数和 API 方法的完整列表，请参阅 API 方法。

静态数学渲染

要静态呈现公式，请调用 MQ。HTML 元素上的 StaticMath（）：

<p>Solve <span id="problem">ax^2 + bx + c = 0</span>.</p><script>  var problemSpan = document.getElementById('problem');  MQ.StaticMath(problemSpan);</script>

可编辑的数学字段

要创建可编辑的数学字段，请调用 MQ。HTML 元素上的 MathField（） 和可选的配置选项对象。以下示例包含一个带有处理程序的数学字段，用于在每次可能进行编辑时检查答案：

<p><span id="answer">x=</span></p><script>  var answerSpan = document.getElementById('answer');  var answerMathField = MQ.MathField(answerSpan, {    handlers: {      edit: function() {        var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format        checkAnswer(enteredMath);      }    }  });</script>

获取和设置数学

要获取和设置数学字段的内容，请使用mathField.latex（）。

数学字段使用跨度中的文本进行初始化，解析为 LaTeX。这可以通过调用mathField.latex（latexString）来更新。若要以编程方式在数学字段中键入文本，请使用 .typedText（string），

设置配置

配置选项对象采用以下形式：

{  spaceBehavesLikeTab: true,  leftRightIntoCmdGoes: 'up',  restrictMismatchedBrackets: true,  sumStartsWithNEquals: true,  supSubsRequireOperand: true,  charsThatBreakOutOfSupSub: '+-=<>',  autoSubscriptNumerals: true,  autoCommands: 'pi theta sqrt sum',  autoOperatorNames: 'sin cos',  maxDepth: 10,  substituteTextarea: function() {    return document.createElement('textarea');  },  handlers: {    edit: function(mathField) { ... },    upOutOf: function(mathField) { ... },    moveOutOf: function(dir, mathField) { if (dir === MQ.L) ... else ... }  }}

您可以通过将选项参数作为第二个参数传递给构造函数 （MQ.MathField（html_element， config）），或通过在math字段（mathField.config（new_config））上调用.config（）。

全局默认值可以使用 MQ.config（global_config） 进行设置。

配置选项

空格行为类似选项卡

如果为 true，则击键的行为类似于从当前块转义（与插入空格字符的默认行为相反）。spaceBehavesLikeTab{Shift-,}Spacebar{Shift-,}Tab

上的动画演示具有此行为。

左右进入CMDGO

这允许您在存在不同高度的项目（如分数）时更改左右键移动光标的方式。

默认情况下，左键和右键按特定顺序在所有可能的光标位置之间移动：右成分数将光标放在分子的左端，右进入分子将光标放在分母的左端，右出分母将光标放在分数的右端。对称地，左成分数将光标放在分母的右端，依此类推。

相反，如果您希望右在视觉上始终向右移动，而向左在视觉上始终向左移动，则可以将左和右（分别）向上或向下设置为命令。例如，表示向左进入分数，向右进入分子，向右进入分子跳过分母并将光标放在分数的右侧。此行为可以在 Desmos 计算器中看到。如果将此属性设置为 相反，则分子更难导航到，就像在 Mac OS X 内置应用程序 Grapher 中一样。leftRightIntoCmdGoes'up''down''up''down'

限制不匹配的括号

如果为 true，则可以键入 和 ，但如果您尝试键入 or ，则会得到 or 代替。这使您可以正常键入;否则，你会得到.
restrictMismatchedBrackets[a,b)(a,b][x}\langle x|[{x}]\langle|x|\rangle(|x|+1)\left( \right| x \left| + 1 \right)

sumStartsWithNEquals

如果为 true，则当您键入 、 或 时，下限以 开头，例如，您获得 LaTeX ，而不是默认为空。sumStartsWithNEquals\sum\prod\coprodn=\sum_{n=}^{ }

supSubsRequireOperand

supSubsRequireOperand当光标左侧没有要指数或下标的内容时，禁用上标和下标的键入。防止特别令人困惑的错别字，它看起来很像.x^^2x^2

charsThatBreakOutOfSupSub

charsThatBreakOutOfSupSub获取一串字符，键入时，上标和下标“分解”。

通常，要摆脱上标或下标，用户必须使用方向键、鼠标单击、选项卡或空格（如果 spaceBehavesLikeTab 为真）导航出上标或下标。例如，键入通常会导致 LaTeX .如果你想得到 LaTeX ，用户必须手动将光标移出指数。x^2n+yx^{2n+y}x^{2n}+y

如果此选项设置为 ，并且将“突破”指数。这不适用于上标或下标中的第一个字符，因此键入仍会导致 .设置此选项的缺点是，为了键入，需要一种解决方法，例如键入然后删除。'+-'+-x^-6x^{-6}x^{n+m}x^(n+m(

自动命令

autoCommands定义通过键入字母而不先键入反斜杠来自动呈现的命令集。

这采用格式化为空格分隔的 LaTeX 命令列表的字符串。每个 LaTeX 命令必须至少为字母，最小长度为 2 个字符。

例如，设置为 时，单词 'pi' 会自动转换为 pi 符号，单词 'theta' 会自动转换为 theta 符号。autoCommands'pi theta'

自动操作员名称

autoOperatorNames覆盖在键入字母而不先键入反斜杠时自动变为非斜体的运算符名称集，例如 、 等。sinlog

这默认为 LaTeX 内置运算符名称（简短数学指南的第 3.17 节），以及其他三角运算符，如、、等。如果要在设置此属性后将其中一些设置为斜体，则必须将它们添加到列表中。secharcsecarsinh

就像上面的自动命令一样，这需要一个格式化为空格分隔的 LaTeX 命令列表的字符串。

最大深度

maxDepth指定嵌套数学块的最大数量。当设置为 1 时，用户可以直接在编辑器中键入简单的数学符号，但不能在嵌套的 MathBlock 中键入，例如分数的分子和分母。maxDepth

在初始化期间呈现的 latex 中嵌套内容或粘贴到 mathquill 中的嵌套内容将被截断以避免违反 .如果未设置，则默认情况下不应用深度限制。maxDepthmaxDepth

替换文本区域

substituteTextarea是一个函数，用于创建在设置数学字段时调用的可聚焦 DOM 元素。覆盖它对于抑制内置虚拟键盘等黑客可能很有用。默认为 .<textarea autocorrect=off .../>

例如，Desmos 在 iOS 上替换了内置虚拟键盘，以支持调用 MathQuill API 的自定义数学键盘。不幸的是，没有通用的虚拟键盘或检测触摸屏的方法，即使可以，触摸屏≠虚拟键盘（Windows 8和ChromeOS设备同时具有物理键盘和触摸屏，iOS和Android设备可以具有蓝牙键盘）。Desmos目前嗅探iOS的用户代理，因此蓝牙键盘在iOS上的Desmos中不起作用。权衡取舍取决于您。<span tabindex=0></span>

处理器

处理程序在指定事件之后调用。它们直接在传入的对象上调用，保留值，因此您可以执行以下操作：handlersthis

var MathList = P(function(_) {  _.init = function() {    this.maths = [];    this.el = ...  };  _.add = function() {    var math = MQ.MathField($('<span/>')[0], { handlers: this });    $(math.el()).appendTo(this.el);    math.data.i = this.maths.length;    this.maths.push(math);  };  _.moveOutOf = function(dir, math) {    var adjacentI = (dir === MQ.L ? math.data.i - 1 : math.data.i + 1);    var adjacentMath = this.maths[adjacentI];    if (adjacentMath) adjacentMath.focus().moveToDirEnd(-dir);  };  ...});

通常忽略最后一个参数，例如处理程序关闭数学字段：

var latex = '';var mathField = MQ.MathField($('#mathfield')[0], {  handlers: {    edit: function() { latex = mathField.latex(); },    enter: function() { submitLatex(latex); }  }});

*超出处理程序

.moveOutOf(direction, mathField), , , ,.deleteOutOf(direction, mathField).selectOutOf(direction, mathField).upOutOf(mathField).downOutOf(mathField)

当光标移动会导致光标离开 MathQuill mathField 时，将调用处理程序。这些使您可以在代码和 MathQuill 之间无缝集成光标移动。例如，当光标位于右边缘时，按 Right 键会导致调用处理程序和数学字段 API 对象。按退格键会导致调用 和 API 对象。*
OutOfmoveOutOfMQ.RdeleteOutOfMQ.L

输入（数学字段）

每当按回车键时调用。

编辑（数学字段）

当字段的内容可能已更改时，将调用此函数。这将通过任何编辑进行调用，例如使用 API 键入、删除或写入的内容。请注意，当实际没有任何更改时，可能会调用它。

已弃用的别名：、。editedreflow

更改颜色

若要更改前景色，请同时设置 和 ，因为某些 MathQuill 符号是使用边框而不是纯文本实现的。colorborder-color

例如，要设置黑底白字而不是白底黑字的样式，请使用：

#my-math-input {  color: white;  border-color: white;  background: black;}#my-math-input .mq-matrixed {  background: black;}#my-math-input .mq-matrixed-container {  filter: progid:DXImageTransform.Microsoft.Chroma(color='black');}

IE8 上的颜色更改支持

要在 IE8 中支持 MathQuill 可编辑背景色（而不是白色），请在可编辑的 mathField 和带有类的元素上设置背景颜色。然后在带有类的元素上设置色度过滤器。
mq-matrixedmq-matrixed-container

接口方法

要使用 MathQuill API，请先获取最新版本的接口：

var MQ = MathQuill.getInterface(2);

默认情况下，MathQuill 在加载时会覆盖全局变量。如果你不希望这种行为，你可以使用（类似于jQuery.noConflict（））：MathQuill.noConflict()

<script src="/path/to/first-mathquill.js"></script><script src="/path/to/second-mathquill.js"></script><script>var secondMQ = MathQuill.noConflict().getInterface(2);secondMQ.MathField(...);var firstMQ = MathQuill.getInterface(2);firstMQ.MathField(...);</script>

这允许不同的 MathQuill 副本各自为自己的数学字段提供支持，但在同一 DOM 元素上使用不同的副本是行不通的。 主要是为了帮助您减少全局变量。.noConflict()

构造 函数

MQ.静态数学（html_element）

创建一个使用 HTML 元素的内容初始化的不可编辑的 MathQuill，并返回一个 StaticMath 对象。

如果给定元素已经是一个静态数学实例，这将返回一个新的 StaticMath 对象，具有相同的 .如果元素是不同类型的 MathQuill，这将返回 。.idnull

MQ.MathField（html_element， [ config ]）

创建一个使用 HTML 元素的内容初始化的可编辑 MathQuill，并返回一个 MathField 对象。

如果给定元素已经是一个可编辑的数学字段，这将返回一个新的可编辑的 MathField 对象，该对象具有相同的 .如果元素是不同类型的 MathQuill，这将返回 。.idnull

\MathQuillMathField LaTeX 命令

\MathQuillMathField可用于在静态数学中嵌入可编辑的数学字段，例如：

<span id="fill-in-the-blank">\sqrt{ \MathQuillMathField{x}^2 + \MathQuillMathField{y}^2 }</span><script>  var fillInTheBlank = MQ.StaticMath(document.getElementById('fill-in-the-blank'));  fillInTheBlank.innerFields[0].latex() // => 'x'  fillInTheBlank.innerFields[1].latex() // => 'y'</script>

如您所见，可以通过 在 StaticMath 对象上访问它们。.innerFields

MQ（html_element）

MQ本身是一个接受 HTML 元素的函数，如果它是根 静态数学或数学字段的 HTML 元素，为其返回一个 API 对象 （如果没有， ）：null

MQ(mathFieldSpan) instanceof MQ.MathField // => trueMQ(otherSpan) // => null

MQ.config（config）

更新全局配置选项（可以基于每个字段覆盖）。

比较数学字段

检查类型

var staticMath = MQ.StaticMath(staticMathSpan);mathField instanceof MQ.StaticMath // => truemathField instanceof MQ // => truemathField instanceof MathQuill // => truevar mathField = MQ.MathField(mathFieldSpan);mathField instanceof MQ.MathField // => truemathField instanceof MQ.EditableField // => truemathField instanceof MQ // => truemathField instanceof MathQuill // => true

比较身份证

同一 MathQuill 实例的 API 对象具有相同的 ，它将始终是唯一的真实基元值，可用作对象键（如临时映射或集合）：.id

MQ(mathFieldSpan).id === mathField.id // => truevar setOfMathFields = {};setOfMathFields[mathField.id] = mathField;MQ(mathFieldSpan).id in setOfMathFields // => truestaticMath.id in setOfMathFields // => false

数据对象

类似地，同一 MathQuill 实例的 API 对象共享一个对象（可以像临时 WeakMap 或 WeakSet 一样使用）：.data

MQ(mathFieldSpan).data === mathField.data // => truemathField.data.foo = 'bar';MQ(mathFieldSpan).data.foo // => 'bar'

数学奎尔基本方法

以下是每个 MathQuill 对象都有的方法。这些是静态数学实例具有的唯一方法，也是可编辑字段具有的方法的子集。

.revert（）

任何已转换为 MathQuill 实例的元素都可以还原：

<span id="revert-me" class="mathquill-static-math">  some <code>HTML</code></span>

mathfield.revert().html(); // => 'some <code>HTML</code>'

.reflow（）

MathQuill 使用计算的维度，所以如果它们发生变化（因为元素在可见的 HTML DOM 中之前就被数学化了，或者字体大小发生了变化），那么你需要告诉 MathQuill 重新计算：

var mathFieldSpan = $('<span>\sqrt最新版本</span>');var mathField = MQ.MathField(mathFieldSpan[0]);mathFieldSpan.appendTo(document.body);mathField.reflow();

.el（）

返回根 HTML 元素。

.latex（）

将内容作为 LaTeX 返回。

.乳胶（latex_string）

这会在 MathQuill 实例中将参数呈现为 LaTeX。

可编辑的数学字段方法

除了此处列出的方法外，可编辑数学字段还具有上述所有方法。

.focus（）

将焦点放在可编辑字段上。

.blur（）

从可编辑字段中删除焦点。

.write（latex_string）

在当前光标位置写入给定的 LaTeX。如果光标没有焦点，则写入光标在可编辑字段中的最后一个位置。

mathField.write(' - 1'); // writes ' - 1' to mathField at the cursor position

.cmd（latex_string）

在当前光标位置或当前所选内容中输入 LaTeX 命令。如果光标没有焦点，则会将其写入光标在可编辑字段中的最后一个位置。

mathField.cmd('\sqrt'); // writes a square root command at the cursor position

.select（）

选择内容（就像在文本区域 s 和输入s 上一样）。

.clearSelection（）

清除所选内容。

.moveToLeftEnd（）， .moveToRightEnd（）

将光标分别移动到可编辑字段的左端/右端。这些分别是.moveToDirEnd（L/R）的简写。

.moveToDirEnd（direction）

按指定方向将光标移动到数学字段的末尾。方向可以是 或 之一。这些是常量，其中反之亦然。如果在 moveOutOf 处理程序中使用，此函数可能比 moveToLeftEnd 或 moveToRightEnd 更容易使用。MQ.LMQ.RMQ.L === -MQ.R

var config = {  handlers: {    moveOutOf: function(direction) {      nextMathFieldOver.movetoDirEnd(-direction);    }  }});

.击键（键）

模拟给定字符串的击键，例如 ，带有可选前缀的以空格分隔的键输入列表。"Ctrl-Home Del"

mathField.keystroke('Shift-Left'); // Selects character before the current cursor position

.typedText（text）

模拟键入文本，一次从光标当前所在的位置键入一个字符。这应该与用户键入文本时发生的情况相同。

// Types part of the demo from mathquill.com without delays between keystrokesmathField.typedText('x=-b\pm \sqrt b^2 -4ac');

.config（new_config）

仅更改此数学字段的配置。

.dropEmbedded（pageX， pageY， options）ᴇxᴘᴇʀɪᴍᴇɴᴛᴀʟ

在给定坐标处插入自定义嵌入元素，其中对象如下：options

{  htmlString: '<span class="custom-embed"></span>',  text: function() { return 'custom_embed'; },  latex: function() { return '\customEmbed'; }}

.registerEmbed（'name'， function（id）{ return options; }）ᴇxᴘᴇʀɪᴍᴇɴᴛᴀʟ

允许 MathQuill 从 latex 解析自定义嵌入对象，其中 是类似于上面 中定义的对象。这会将以下 latex 解析为您定义的嵌入对象：。options.dropEmbedded()\embed{name}[id]}

#头条创作挑战赛#