vue mathlive

Der Mathlive Vue-Wrapper bietet eine Vue-Komponente, die ein <mathlive-mathfield> HTML-Tag implementiert.

Die Komponente kann verwendet werden, um Formeln mithilfe der Mathlive -Bibliothek zu bearbeiten. Der Editor bietet eine reichhaltige, zugängliche, bearbeitete Benutzeroberfläche, einschließlich virtueller Tastaturen für Mobilgeräte, und kann die Ausgabe als Latex, MathML oder gesprochener Text bereitstellen.

Erste Schritte

Die MatheLive -Bibliothek muss separat geladen werden. Dies gibt die Möglichkeit, eine bestimmte Version der Bibliothek auszuwählen, die vom Wrapper verwendet werden soll.

Als nächstes sollte der Wrapper importiert werden, dann die beiden mit Vue.use() verbunden werden

Hinweis: Dieses Repository enthält nur das Beispiel. Die Vue -Wrapper ist mit der Hauptbibliothek der Hauptmathematik verpackt.

Achtung : Wenn Sie Laufzeitfehler erhalten, wenn Sie eine Mathfield-Komponente und eine Warnung in der Konsole von Vue über "Sie verwenden den Runtime-Build von VUE verwenden ..." addieren Sie runtimeCompiler: true zu Ihrer Vue-Konfiguration.

 < 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 >

Das Standard-Tag für Mathfields ist <mathlive-mathfield> Ein benutzerdefiniertes Tag kann mit:

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

Die Komponente unterstützt das v-model Attribut.

Der Textinhalt des Elements wird als Anfangswert des Editors verwendet.

Das Mathfield kann mit dem Attribut :options konfiguriert werden, um den Speicherort des Verzeichnisses der Schriftarten anzugeben. Lesen Sie mehr über die verfügbaren Optionen.

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

Requisiten

Name	Typ	Beschreibung
value	string	Der Inhalt des Mathfield, dargestellt als Latex -Zeichenfolge.
options	object	Konfigurationsoptionen für das Mathfield.
onKeystroke	(keystroke:string, ev:Event) => boolean	Ein Rückruf aufgerufen, wenn eine Taste gedrückt wird. keystroke ist eine Zeichenfolge, die den Tastenanschlag beschreibt. ev ist das native Tastaturereignis. Rückkehr falsch, um die Handhabung des Ereignisses zu beenden
onMoveOutOf	(string) => boolean	Ein Rückruf, der aufgerufen wurde, wenn die Tastaturnavigation das Einfügen auf das Mathfield verlässt. Das Argument zeigt die Richtung der Navigation, entweder "vorwärts" oder "rückwärts". Rückgabe falsch, um die Bewegung zu verhindern, um sich auf den Start des Feldes zu wickeln. Standardmäßig wird sich der Einfügenpunkt umsetzt.
onTabOutOf	(string) => boolean	Ein Rückruf, der beim Drücken der Registerkarte (oder des Schalttabs) aufgerufen wird, würde dazu führen, dass der Einfügenpunkt das Mathfield verlässt. Das Argument zeigt die Richtung der Navigation, entweder "vorwärts" oder "rückwärts". Rückgabe falsch, um die Bewegung zu verhindern, um sich auf den Start des Feldes zu wickeln. Standardmäßig wird sich der Einfügenpunkt umsetzt.

Ereignisse

Name	Beschreibung
focus	Die Editor -Instanz hat den Eingabefokus gewonnen.
blur	Die Editor -Instanz verlor den Eingabefokus.
input	Der Inhalt des Mathfield hat sich geändert. Der Parameter des Ereignisses ist der neue Wert als Zeichenfolge
selection-will-change	Die Auswahl des Mathfield wird sich ändern
undo-state-will-change	Der Rückgängig -Staat wird sich ändern, um sich zu ändern
undo-state-did-change	Der Nachsichtsstaat hat sich verändert
virtual-keyboard-toggle	Die Sichtbarkeit der virtuellen Tastatur hat sich geändert. Das erste Argument ist ein Boolescher, der angibt, ob die Tastatur jetzt sichtbar ist. Das zweite Argument ist ein DOM -Element, das die virtuelle Tastatur enthält.
read-aloud-status	Der Status der vorgelesenen Vorgängeroperation hat sich geändert. Das erste Argument ist eine Zeichenfolge, die den neuen Status angibt.

Methoden

Name	Beschreibung
perform(selector:string)	Führen Sie eine Aktion aus, wie vom Selektor angegeben.
hasFocus(): boolean	Wahr, wenn das Mathfield konzentriert ist
focus()	Stellen Sie den Fokus auf das Mathfield
blur()	Entfernen Sie den Fokus aus dem Mathfield
text(format:string): string	Geben Sie den Inhalt des Mathfield als Zeichenfolge im angegebenen Format zurück: "latex" , "latex-expanded" (alle Latex-Makros werden auf ihre Definition erweitert), "spoken" , "mathML"
selectedText(format:string): string	Wie text() , aber nur für die aktuelle Auswahl.
insert(content:string, options:object)	options.insertionMode = 'replaceSelection' (Standard), 'replaceAll' , 'insertBefore' , 'insertAfter' options.selectionMode - Beschreibt, wo die Auswahl nach dem Einfügen vorliegt: 'placeholder' : Die Auswahl ist der erste verfügbare Platzhalter in dem Element, der eingefügt wurde) (Standard), 'after' 'before' Die Auswahl ist ein Einfügepunkt, der nach dem Element eingefügt wurde. options.placeholder - Die Platzhalterzeichenfolge, falls erforderlich options.format - Das Format der Zeichenfolge s : 'auto' : Die Zeichenfolge wird als Latex -Fragment oder Befehl interpretiert) (Standard), 'latex' : Die Zeichenfolge wird streng als Latexfragment interpretiert options.smartFence - Wenn wahr, fördern Sie einfache Zäune ( left...right mleft...mright options.suppressChangeNotifications . Standard false .
keystroke(keys:string, evt:Event)	Simulieren Sie einen Benutzer, der eine Schlüsselkombination drückt
typedText(text:string)	Simulieren Sie einen Benutzer, der einen Text eingreift.
selectionIsCollapsed():boolean	Richtig, wenn die Auswahl zusammengebrochen ist, dh einzelner Einfügenpunkt
selectionDepth():number	Geben Sie die Tiefe der Auswahlgruppe zurück. Wenn sich die Auswahl auf der Stammebene befindet, kehrt 0 zurück. Wenn die Auswahl ein Teil des Zählers eines Fraktion ist, der sich auf der Stammebene befindet, kehren Sie zu 1. Beachten Sie, dass der Zähler in diesem Fall die "Auswahlgruppe" ist.
selectionAtStart():boolean	Geben Sie True zurück, wenn die Auswahl am Anfang der Auswahlgruppe beginnt
selectionAtEnd():boolean	Geben Sie True zurück, wenn sich die Auswahl bis zum Ende der Auswahlgruppe erstreckt
select()	Wählen Sie den Inhalt des Mathfields aus

Selektoren

Selektoren können an [ Mathfield.executeCommand() ] {@link Mathfield#executeCommand} übergeben werden, um verschiedene Befehle auszuführen. Sie können auch mit Tasten in der virtuellen Tastatur zugeordnet werden.

Eine Liste aller Selektoren finden Sie unter {@tutorial Selectors}.