codemirror editor vue3

Introducción

简体中文

El componente CodeMirror de Vue3. Este componente se desarrolla en base a CodeMirror 5 y solo se admite Vue3.

Además de los modos oficialmente compatibles, se agrega el modo de presentación de salida del registro, fuera de la caja, pero no necesariamente adecuado para todos los escenarios.

Para obtener documentación completa y más casos, consulte los documentos CodeMirror-Editor-Vue3.

Instalar

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 su proyecto requiere soporte TypeScript, también deberá instalar la dependencia '@tipos/codemirror'.

npm install @types/codemirror -D

Registre el componente global

No recomiende componentes de registro global , que darán como resultado el tipo de indicador en la plantilla que no se puede obtener correctamente.

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

El nombre del componente registrado global es CodeMirror o puede personalizar un nombre de componente, por ejemplo:

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

Usar en componentes

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

Destacado del idioma

Puede hacer clic en el siguiente enlace para ver los casos de lenguaje correspondientes

• javascript
• json
• CSS
• html
• APL
• yaml

Se agregan más casos gradualmente, y también puede consultar el documento para lograr más modos de idioma.

Accesorios de componentes

nombre	descripción	tipo	por defecto
Valor (V-Modelo)	Contenido del editor	string	"
opción	Opciones de configuración de CodeMirror5	Conconfiguración del editor	Default_options
marcador de posición	Contenido del marcador de posición del editor para introducir archivos relacionados con CodeMirror	string	"
borde	Si mostrar las fronteras del editor	boolean	false
ancho	ancho	string	100%
altura	altura	string	100%
estilo original	Usando el estilo original, deshabilite la segunda modificación del estilo para este componente (pero no afecta el ancho, la altura y el borde)	boolean	false
KeepCursorinend	Siempre mantenga la posición del mouse en la última línea	boolean	false
unir	Modo de fusión, también se puede usar como patrón diff	boolean	false

Eventos

Eventos componentes

Los siguientes tres son solo los eventos encapsulados por este componente. Consulte más eventos de eventos Codemirror Events

nombre del evento	descripción	parámetros
change	Cambios de valor o instancia	(value: string, cm: Editor) => void
input	aporte	(value: string) => void
ready	El componente de CodeMirror está montado	(cm: Editor) => void;

---

Eventos de Codemirror

Los siguientes eventos son eventos oficiales de Codemirror5. Puede consultar los documentos oficiales para obtener detalles del evento CodeMirror, puede usar este componente para vincular eventos directamente a través de componentes, por ejemplo::

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

Todos los nombres de eventos son los siguientes:

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