codemirror editor vue3

Introduction

简体中文

Le composant Codemirror de Vue3. Ce composant est développé sur la base de Codemirror 5 et seul Vue3 est pris en charge.

En plus des modes officiellement pris en charge, le mode de présentation de sortie du journal est ajouté, hors de la boîte, mais pas nécessairement adapté à tous les scénarios.

Pour une documentation complète et plus de cas, veuillez consulter Codemirror-Editor-Vue3 Docs.

Installer

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

Si votre projet nécessite une prise en charge de TypeScript, vous devrez également installer la dépendance «@ types / codemirror».

npm install @types/codemirror -D

Enregistrer la composante globale

Ne recommandez pas les composants d'enregistrement globaux , ce qui entraînera le type d'invite sur le modèle qui ne peut pas être correctement obtenu.

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" ) ;

Le nom du composant global enregistré est CodeMirror ou vous pouvez personnaliser un nom de composant, par exemple:

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

Utiliser dans les composants

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

Langue mettant en évidence

Vous pouvez cliquer sur le lien suivant pour afficher les cas de langue correspondants

• javascrip
• json
• CSS
• html
• apogée
• yaml

D'autres cas sont progressivement ajoutés et vous pouvez également vous référer au document pour réaliser plus de modes de langue.

Accessoires composants

nom	description	taper	défaut
valeur (modèle V)	Contenu de l'éditeur	string	""
options	Options de configuration de Codemirror5	EditorConfiguration	Default_options
espace réservé	Contenu de l'éditeur PlaceHolder pour introduire des fichiers liés à Codemirror	string	""
frontière	S'il faut afficher les frontières de l'éditeur	boolean	false
largeur	largeur	string	100%
hauteur	hauteur	string	100%
de style original	En utilisant le style d'origine, désactivez la deuxième modification du style pour ce composant (mais n'affecte pas la largeur, la hauteur et la bordure)	boolean	false
Keepcursorinend	Gardez toujours la position de la souris sur la dernière ligne	boolean	false
fusionner	Mode de fusion, peut également être utilisé comme modèle Diff	boolean	false

Événements

Événements composants

Les trois suivants ne sont que les événements encapsulés par ce composant. Veuillez vous référer à plus d'événements Codemirror Events

nom de l'événement	description	paramètres
change	Valeur ou modification de l'instance	(value: string, cm: Editor) => void
input	saisir	(value: string) => void
ready	Le composant Codemiror est monté	(cm: Editor) => void;

---

Événements Codemirror

Les événements suivants sont des événements officiels de Codemirror5. Vous pouvez vous référer aux documents officiels pour plus de détails sur l'événement Codemiror ， Vous pouvez utiliser ce composant pour lier les événements directement via des composants, par exemple: par exemple:

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

Tous les noms d'événements sont les suivants:

• changes
• scroll
• beforeChange
• cursorActivity
• keyHandled
• inputRead
• electricInput
• beforeSelectionChange
• viewportChange
• swapDoc
• gutterClick
• gutterContextMenu
• focus
• blur
• refresh
• optionChange
• scrollCursorIntoView
• update