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)

NameTypeDescription

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)

NameDescription

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)

NameDescription

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()來執行各種命令。 它們還可以與虛擬鍵盤中的鍵或鍵盤快捷鍵相關聯。

NameDescription

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數學公式編輯器

總結

以上是生活随笔為你收集整理的vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。