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

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的配置选项。 查看