codemirror editor vue3 Download - codemirror editor vue3 Quellcode Download

codemirror editor vue3

Andere Ressourcen

v2.8.0

Herunterladen

Einführung

简体中文

Die Codemirror -Komponente von VUE3. Diese Komponente wird basierend auf Codemirrror 5 entwickelt und nur VUE3 wird unterstützt.

Zusätzlich zu den offiziell unterstützten Modi wird der Präsentationsmodus für Protokollausgänge hinzugefügt, nicht unbedingt für alle Szenarien geeignet.

Für vollständige Dokumentation und weitere Fälle finden Sie unter Codemirror-Eduitor-VUE3-Dokumente.

Installieren

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 "

pnpm i codemirror-editor-vue3 codemirror@^5 -S

Wenn für Ihr Projekt Typscript -Support erforderlich ist, müssen Sie auch die Abhängigkeit von "@type/codemirrror" installieren.

npm install @types/codemirror -D

Registrieren Sie die globale Komponente

Empfehlen Sie keine globalen Registrierungskomponenten , die zu der Art der Eingabeaufforderung in der Vorlage führen, die nicht ordnungsgemäß erhalten werden kann.

main.js:

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

Der globale registrierte Komponentenname ist codemirrror oder Sie können einen Komponentennamen anpassen, z. B.:

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ;

Verwendung in Komponenten

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

Sprache hervorgehoben

Sie können auf den folgenden Link klicken, um entsprechende Sprachfälle anzuzeigen

JavaScript
JSON
CSS
html
Apl
Yaml

Weitere Fälle werden allmählich hinzugefügt, und Sie können auch auf das Dokument verweisen, um mehr Sprachmodi zu erreichen.

Komponentenquellen

Name	Beschreibung	Typ	Standard
Wert (V-Model)	Editorinhalt	`string`	"" "
Optionen	Konfigurationsoptionen von Codemirror5	EditorConfiguration	Default_options
Platzhalter	Der Redakteur -Platzhalterinhalt zur Einführung von Codemirror -verwandten Dateien	`string`	"" "
Grenze	Ob die Editor -Grenzen angezeigt werden sollen	`boolean`	`false`
Breite	Breite	`string`	`100%`
Höhe	Höhe	`string`	`100%`
Originalstil	Deaktivieren Sie mit dem ursprünglichen Stil die zweite Modifikation des Stils für diese Komponente (wirken sich jedoch nicht auf Breite, Höhe und Rand aus)	`boolean`	`false`
KeepCursorinend	Halten Sie die Maussposition immer in der letzten Zeile	`boolean`	`false`
verschmelzen	Zusammenführungsmodus kann auch als Diff -Muster verwendet werden	`boolean`	`false`

Ereignisse

Komponentenereignisse

Die folgenden drei sind nur die von dieser Komponente eingekapsierten Ereignisse. Weitere Ereignisse finden Sie Codemirror -Ereignisse

Ereignisname	Beschreibung	Parameter
`change`	Wert- oder Instanzänderungen	`(value: string, cm: Editor) => void`
`input`	Eingang	`(value: string) => void`
`ready`	Die Codemirror -Komponente ist montiert	`(cm: Editor) => void;`

Codemirror -Ereignisse

Die folgenden Ereignisse sind offizielle Ereignisse von Codemirror5. Sie können auf die offiziellen Dokumente finden

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>