vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例

cuk5340

5822人浏览 · 2020-07-26 11:13:48

cuk5340 · 2020-07-26 11:13:48 发布

vue数学公式编辑器

Vue-Mathlive (vue-mathlive)

The MathLive Vue wrapper provides a Vue component that implements a <mathfield> HTML tag.

MathLive Vue包装器提供了实现<mathfield> HTML标签的Vue组件。

The component can be used to edit formulas using the MathLive library. The editor provides a rich, accessible, editing UI, including virtual keyboards for mobile, and can provide the output as LaTeX, MathML or spoken text.

该组件可用于使用MathLive库编辑公式。该编辑器提供了丰富，可访问的编辑UI，包括用于移动设备的虚拟键盘，并且可以将输出提供为LaTeX，MathML或语音文本。

入门 (Getting Started)

The MathLive library must be loaded separately. This gives the option to pick a specific version of the library to be used by the wrapper.

MathLive库必须单独加载。这提供了选择包装程序要使用的库的特定版本的选项。

Next, the wrapper should be imported, then the two connected using Vue.use()

接下来，应该导入包装器，然后使用Vue.use()将两者连接起来

Note: this repository only contains the sample. The Vue wrapper is packaged with the main MathLive library.

注意：此存储库仅包含样本。 Vue包装器与主MathLive库打包在一起。

<script type='module'> 
    import MathLive from "./mathlive.js";
    import Mathfield from "./vue-mathlive.mjs";

    Vue.use(Mathfield, MathLive);
</script>

The default tag for mathfields is <mathlive-mathfield> A custom tag can be defined using:

mathfields的默认标签为<mathlive-mathfield>可以使用以下方式定义自定义标签：

Vue.component("custom-tag", Mathfield);

The component supports the v-model attribute.

该组件支持v-model属性。

The textual content of the element is used as the initial value of the editor.

元素的文本内容用作编辑器的初始值。

<mathlive-mathfield 
      :config="{smartFence:false}"
      @focus="ping"
      :on-keystroke="displayKeystroke"
      v-model="formula">
        f(x)=
    </mathlive-mathfield>

道具 (Props)

Name	Type	Description
`value`	`string`	The content of the matfield, represented as a LaTeX string.
`config`	`object`	Configuration options for the mathfield. See documentation
`onKeystroke`	`(keystroke:string, ev:Event) => boolean`	A callback invoked when a key is pressed. `keystroke` is a string describing the keystroke, `ev` is the native keyboard event. Return false to stop handling of the event
`onMoveOutOf`	`(string) => boolean`	A callback invoked when keyboard navigation would cause the insertion point to leave the mathfield. The argument indicates the direction of the navigation, either "forward" or "backward". Return false to prevent the move, true to wrap around to the start of the field. By default, the insertion point will wrap around.
`onTabOutOf`	`(string) => boolean`	A callback invoked when pressing tab (or shift-tab) would cause the insertion point to leave the mathfield. The argument indicates the direction of the navigation, either "forward" or "backward". Return false to prevent the move, true to wrap around to the start of the field. By default, the insertion point will wrap around.

名称	类型	描述
`value`	`string`	matfield的内容，以LaTeX字符串表示。
`config`	`object`	mathfield的配置选项。查看文件
`onKeystroke`	`(keystroke:string, ev:Event) => boolean`	按下键时调用的回调。 `keystroke`是描述`keystroke`的字符串， `ev`是本机键盘事件。返回false以停止事件处理
`onMoveOutOf`	`(string) => boolean`	键盘导航时调用的回调将导致插入点离开mathfield。该参数指示导航的方向，“向前”或“向后”。返回false阻止移动，返回true环绕到字段的开头。默认情况下，插入点将环绕。
`onTabOutOf`	`(string) => boolean`	按下tab(或shift-tab)时调用的回调将导致插入点离开mathfield。该参数指示导航的方向，“向前”或“向后”。返回false阻止移动，返回true环绕到字段的开头。默认情况下，插入点将环绕。

大事记 (Events)

Name	Description
`focus`	The editor instance gained the input focus.
`blur`	The editor instance lost the input focus.
`content-will-change`	The content of the mathfield is about to change.
`input`	The content of the mathfield has changed. The parameter of the event is the new value as a string
`selection-will-change`	The selection of the mathfield is about to change
`undo-state-will-change`	The undo state is about to change
`undo-state-did-change`	The undo state has changed
`virtual-keyboard-toggle`	The visibility of the virtual keyboard has changed. The first argument is a boolean indicating if the keyboard is now visible. The second argument is a DOM element containing the virtual keyboard.
`read-aloud-status`	The status of the read aloud operation has changed. The first argument is a string indicating the new status.

名称	描述
`focus`	编辑器实例获得了输入焦点。
`blur`	编辑器实例失去了输入焦点。
`content-will-change`	mathfield的内容即将更改。
`input`	mathfield的内容已更改。事件的参数是作为字符串的新值
`selection-will-change`	数学字段的选择即将更改
`undo-state-will-change`	撤消状态即将改变
`undo-state-did-change`	撤消状态已更改
`virtual-keyboard-toggle`	虚拟键盘的可见性已更改。第一个参数是一个布尔值，指示键盘现在是否可见。第二个参数是包含虚拟键盘的DOM元素。
`read-aloud-status`	朗读操作的状态已更改。第一个参数是指示新状态的字符串。

方法 (Methods)

Name	Description
`perform(selector:string)`	Perform an action, as indicated by the selector.
`hasFocus(): boolean`	True if the matfield is focused
`focus()`	Set the focus to the mathfield
`blur()`	Remove the focus from the mathfield
`text(format:string): string`	Return the content of the mathfield as a string in the specified format: `"latex"`, `"latex-expanded"` (all the LaTeX macros are expanded to their definition), `"spoken"`, `"mathML"`
`selectedText(format:string): string`	Like `text()`, but only for the current selection.
`insert(content:string, options:object)`	`options.insertionMode` = `'replaceSelection'` (default), `'replaceAll'`, `'insertBefore'`, `'insertAfter'` `options.selectionMode` - Describes where the selection will be after the insertion: `'placeholder'`: the selection will be the first available placeholder in the item that has been inserted) (default), `'after'`: the selection will be an insertion point after the item that has been inserted, `'before'`: the selection will be an insertion point before the item that has been inserted) or 'item' (the item that was inserted will be selected). `options.placeholder` - The placeholder string, if necessary `options.format` - The format of the string `s`: `'auto'`: the string is interpreted as a latex fragment or command) (default), `'latex'`: the string is interpreted strictly as a latex fragment `options.smartFence` - If true, promote plain fences, e.g. `(`, as `\left...\right` or `\mleft...\mright` `options.suppressContentChangeNotifications` - If true, the handlers for the contentWillChange and contentDidChange notifications will not be invoked. Default `false`.
`keystroke(keys:string, evt:Event)`	Simulate a user pressing a key combination
`typedText(text:string)`	Simulate a user typing some text.
`selectionIsCollapsed():boolean`	True if the selection is collapsed, i.e. single insertion point
`selectionDepth():number`	Return the depth of the selection group. If the selection is at the root level, returns 0. If the selection is a portion of the numerator of a fraction which is at the root level, return 1. Note that in that case, the numerator would be the "selection group"
`selectionAtStart():boolean`	Return true if the selection starts at the beginning of the selection group
`selectionAtEnd():boolean`	Return true if the selection extends to the end of the selection group
`select()`	Select the content of the mathfield
`clearSelection()`	Collapse the selection in the mathfield

名称	描述
`perform(selector:string)`	执行选择器指示的操作。
`hasFocus(): boolean`	如果Matfield已聚焦，则为true
`focus()`	将焦点设置到mathfield
`blur()`	从mathfield上移开焦点
`text(format:string): string`	以指定格式的字符串形式返回mathfield的内容： `"latex"` ， `"latex-expanded"` (所有LaTeX宏均扩展为其定义)， `"spoken"` ， `"mathML"`
`selectedText(format:string): string`	与`text()`类似，但仅适用于当前选择。
`insert(content:string, options:object)`	`options.insertionMode` = `'replaceSelection'` (默认)， `'replaceAll'` ， `'insertBefore'` ， `'insertAfter'` `options.selectionMode`描述插入后选择的位置： `'placeholder'` ：选择将是已插入项目中第一个可用的占位符)(默认)， `'after'` ：选择将是插入后的插入点插入的项目， `'before'` ：所选内容将是插入的项目之前的插入点)或“项目”(将选择插入的项目)。 `options.placeholder`占位符字符串(如果需要) `options.format`字符串`s`格式`s` ： `'auto'` ：将字符串解释为乳胶片段或命令(默认)， `'latex'` ：严格将字符串解释为乳胶片段 `options.smartFence`如果为true，则推广普通的围栏，例如`(` ，为`\left...\right`或`\mleft...\mright` `options.suppressContentChangeNotifications`如果为true，则不会调用contentWillChange和contentDidChange通知的处理程序。默认为`false` 。
`keystroke(keys:string, evt:Event)`	模拟用户按下组合键
`typedText(text:string)`	模拟用户键入一些文本。
`selectionIsCollapsed():boolean`	如果选择折叠，则为True，即单个插入点
`selectionDepth():number`	返回选择组的深度。如果选择是在根级别，则返回0。如果选择是分数在根级别的分子的一部分，则返回1。请注意，在这种情况下，分子将是“选择组”
`selectionAtStart():boolean`	如果选择从选择组的开头开始，则返回true
`selectionAtEnd():boolean`	如果选择范围扩展到选择组的末尾，则返回true
`select()`	选择数学字段的内容
`clearSelection()`	折叠数学字段中的选择

选择器 (Selectors)

Selectors can be passed to perform() to execute various commands. They can also be associated with keys in virtual keyboard or with keyboard shorcuts.

可以将选择器传递给perform()来执行各种命令。它们还可以与虚拟键盘中的键或键盘快捷键相关联。

Name	Description
`undo`
`redo`
`copyToClipboard`
`cutToClipboard`
`pasteFromClipboard`
`selectGroup`	Select all the atoms in the current group, that is all the siblings. When the selection is in a numerator, the group is the numerator. When the selection is a superscript or subscript, the group is the supsub.
`selectAll`	Select all the atoms in the math field
`deleteAll`	Delete everything in the field
`delete`
`moveToNextPlaceholder`
`moveToPreviousPlaceholder`
`moveToNextChar`
`moveToPreviousChar`
`moveUp`
`moveDown`
`moveToNextWord`
`moveToPreviousWord`
`moveToGroupStart`
`moveToGroupEnd`
`moveToMathFieldStart`
`moveToMathFieldEnd`
`deleteNextChar`
`deletePreviousChar`
`deleteNextWord`
`deletePreviousWord`
`deleteToGroupStart`
`deleteToGroupEnd`
`deleteToMathFieldEnd`
`transpose`
`extendToNextChar`
`extendToPreviousChar`
`extendToNextWord`
`extendToPreviousWord`
`extendUp`
`extendDown`
`extendToNextBoundary`
`extendToPreviousBoundary`
`extendToGroupStart`
`extendToGroupEnd`
`extendToMathFieldStart`
`extendToMathFieldEnd`
`moveToSuperscript`
`moveToSubscript`
`moveToOpposite`
`moveBeforeParent`
`moveAfterParent`
`addRowAfter`
`addRowBefore`
`addColumnAfter`
`addColumnBefore`
`performWithFeedback`
`scrollIntoView`
`scrollToStart`
`enterCommandMode`
`complete`
`nextSuggestion`
`previousSuggestion`
`toggleKeystrokeCaption`
`showAlternateKeys`
`hideAlternateKeys`
`performAlternateKeys`
`switchKeyboardLayer`
`shiftKeyboardLayer`
`unshiftKeyboardLayer`
`insertAndUnshiftKeyboardLayer`
`toggleVirtualKeyboardAlt`
`toggleVirtualKeyboardShift`
`showVirtualKeyboard`
`hideVirtualKeyboard`
`toggleVirtualKeyboard`
`applyStyle`
`speakSelection`
`speakParent`
`speakRightSibling`
`speakLeftSibling`
`speakGroup`
`speakAll`
`speakSelectionWithSynchronizedHighlighting`
`speakAllWithSynchronizedHighlighting`

名称	描述
`undo`
`redo`
`copyToClipboard`
`cutToClipboard`
`pasteFromClipboard`
`selectGroup`	选择当前组中的所有原子，即所有同胞。当选择位于分子中时，该组为分子。当选择为上标或下标时，组为后继。
`selectAll`	选择数学字段中的所有原子
`deleteAll`	删除字段中的所有内容
`delete`
`moveToNextPlaceholder`
`moveToPreviousPlaceholder`
`moveToNextChar`
`moveToPreviousChar`
`moveUp`
`moveDown`
`moveToNextWord`
`moveToPreviousWord`
`moveToGroupStart`
`moveToGroupEnd`
`moveToMathFieldStart`
`moveToMathFieldEnd`
`deleteNextChar`
`deletePreviousChar`
`deleteNextWord`
`deletePreviousWord`
`deleteToGroupStart`
`deleteToGroupEnd`
`deleteToMathFieldEnd`
`transpose`
`extendToNextChar`
`extendToPreviousChar`
`extendToNextWord`
`extendToPreviousWord`
`extendUp`
`extendDown`
`extendToNextBoundary`
`extendToPreviousBoundary`
`extendToGroupStart`
`extendToGroupEnd`
`extendToMathFieldStart`
`extendToMathFieldEnd`
`moveToSuperscript`
`moveToSubscript`
`moveToOpposite`
`moveBeforeParent`
`moveAfterParent`
`addRowAfter`
`addRowBefore`
`addColumnAfter`
`addColumnBefore`
`performWithFeedback`
`scrollIntoView`
`scrollToStart`
`enterCommandMode`
`complete`
`nextSuggestion`
`previousSuggestion`
`toggleKeystrokeCaption`
`showAlternateKeys`
`hideAlternateKeys`
`performAlternateKeys`
`switchKeyboardLayer`
`shiftKeyboardLayer`
`unshiftKeyboardLayer`
`insertAndUnshiftKeyboardLayer`
`toggleVirtualKeyboardAlt`
`toggleVirtualKeyboardShift`
`showVirtualKeyboard`
`hideVirtualKeyboard`
`toggleVirtualKeyboard`
`applyStyle`
`speakSelection`
`speakParent`
`speakRightSibling`
`speakLeftSibling`
`speakGroup`
`speakAll`
`speakSelectionWithSynchronizedHighlighting`
`speakAllWithSynchronizedHighlighting`

翻译自: https://vuejsexamples.com/example-of-using-the-vue-wrapper-for-mathlive-math-editor/

vue数学公式编辑器

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模