vue mathliveダウンロード-Vue vue mathliveソースコードのダウンロード

vue mathlive

その他のリソース

1.0.0

ダウンロード

スクリーンキャスト

Mathlive Vueラッパーは、 <mathlive-mathfield> HTMLタグを実装するVUEコンポーネントを提供します。

コンポーネントは、MathLiveライブラリを使用して式を編集するために使用できます。エディターは、モバイル用の仮想キーボードを含むリッチでアクセス可能な編集UIを提供し、ラテックス、MathML、または音声テキストとして出力を提供できます。

はじめる

Mathliveライブラリは別々にロードする必要があります。これにより、ラッパーが使用するライブラリの特定のバージョンを選択するオプションが提供されます。

次に、ラッパーをインポートし、次に2つをVue.use()を使用して接続する必要があります。

注：このリポジトリには、サンプルのみが含まれています。 Vueラッパーは、メインの数学ライブラリでパッケージ化されています。

注意：「Vueのランタイムのみのビルドを使用している」というVueからコンソールにコンソールにインスタンス化されたときにランタイムエラーが発生している場合は、 runtimeCompiler: true to your your configurationを追加してください。

 < script type =" module " >
  import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.min.mjs" ;
  import VueMathfield from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs" ;

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

Mathfieldsのデフォルトのタグは<mathlive-mathfield>です。カスタムタグは、以下を使用して定義できます。

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

コンポーネントはv-model属性をサポートします。

要素のテキストコンテンツは、エディターの初期値として使用されます。

Mathfieldは、Fontsディレクトリの場所を指定するなど、 :options属性を使用して構成できます。利用可能なオプションの詳細をご覧ください。

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

小道具

名前	タイプ	説明
`value`	`string`	Mathfieldの内容は、ラテックス弦として表されます。
`options`	`object`	Mathfieldの構成オプション。
`onKeystroke`	`(keystroke:string, ev:Event) => boolean`	キーが押されたときに呼び出しが呼び出されました。 `keystroke`はキーストロークを説明する文字列であり、 `ev`ネイティブキーボードイベントです。 falseを返して、イベントの処理を停止します
`onMoveOutOf`	`(string) => boolean`	キーボードナビゲーションが挿入ポイントが数学フィールドを離れると呼び出されたコールバックが呼び出されます。この引数は、「フォワード」または「後方」のいずれかのナビゲーションの方向を示しています。 falseを返して移動を防ぎ、フィールドの開始まで包み込みます。デフォルトでは、挿入ポイントがラップします。
`onTabOutOf`	`(string) => boolean`	タブ（またはシフト-TAB）を押すと呼び出されたコールバックは、挿入ポイントが数学フィールドを離れます。この引数は、「フォワード」または「後方」のいずれかのナビゲーションの方向を示しています。 falseを返して移動を防ぎ、フィールドの開始まで包み込みます。デフォルトでは、挿入ポイントがラップします。

イベント

名前	説明
`focus`	エディターインスタンスは、入力フォーカスを獲得しました。
`blur`	エディターインスタンスは、入力フォーカスを失いました。
`input`	Mathfieldのコンテンツが変更されました。イベントのパラメーターは文字列としての新しい値です
`selection-will-change`	Mathfieldの選択が変化しようとしています
`undo-state-will-change`	UNDO状態が変化しようとしています
`undo-state-did-change`	UNDO状態が変更されました
`virtual-keyboard-toggle`	仮想キーボードの可視性が変更されました。最初の引数は、キーボードが表示されるかどうかを示すブール値です。 2番目の引数は、仮想キーボードを含むDOM要素です。
`read-aloud-status`	読み取り声のステータスが変更されました。最初の引数は、新しいステータスを示す文字列です。

方法

名前	説明
`perform(selector:string)`	セレクターで示されるように、アクションを実行します。
`hasFocus(): boolean`	Mathfieldが集中している場合はTRUE
`focus()`	Mathfieldに焦点を設定します
`blur()`	Mathfieldからフォーカスを削除します
`text(format:string): string`	指定された形式の文字列としてMathfieldのコンテンツを`"latex"` 、 `"latex-expanded"` （すべてのラテックスマクロが定義に拡張されます）、 `"spoken"` 、 `"mathML"`
`selectedText(format:string): string`	`text()`のように、しかし現在の選択のみです。
`insert(content:string, options:object)`	`options.insertionMode` = `'replaceSelection'` （default）、 `'replaceAll'` 、 `'insertBefore'` 、 `'insertAfter'` `options.selectionMode`挿入後の選択の場所を説明します： `'placeholder'` ：選択は、挿入されたアイテムの最初の利用可能なプレースホルダーになります）（デフォルト）、 `'after'` `'before'` 」：選択は挿入されたアイテムの後の挿入ポイントです。 `options.placeholder`必要に応じてプレースホルダー文字列 `options.format`文字列`s`の形式： `'auto'` ：文字列はラテックスフラグメントまたはコマンドとして解釈されます）（デフォルト）、 `'latex'` ：文字列はラテックスフラグメントとして厳密に解釈されます `options.smartFence` -true `left...right`場合、プレーンフェンス`mleft...mright`宣伝します`(` `options.suppressChangeNotifications` -Trueの場合、ContentDidchangeおよびSelectionDidchange通知のハンドラーは呼び出されません。デフォルトの`false` 。
`keystroke(keys:string, evt:Event)`	キーの組み合わせを押すユーザーをシミュレートします
`typedText(text:string)`	いくつかのテキストを入力するユーザーをシミュレートします。
`selectionIsCollapsed():boolean`	選択が崩壊した場合、つまりシングル挿入ポイント
`selectionDepth():number`	選択グループの深さを返します。選択がルートレベルにある場合、0が戻ります。選択がルートレベルにある分数の分子の一部である場合、1。
`selectionAtStart():boolean`	選択が選択グループの先頭から始まる場合、trueを返します
`selectionAtEnd():boolean`	選択が選択グループの終わりまで拡張された場合にtrueを返します
`select()`	Mathfieldのコンテンツを選択します