codemirror editor vue3

Introdução

简体中文

O componente Codemirror de Vue3. Este componente é desenvolvido com base no Codemirror 5 e apenas o VUE3 é suportado.

Além dos modos oficialmente suportados, o modo de apresentação de saída de log é adicionado, fora da caixa, mas não necessariamente adequado para todos os cenários.

Para documentação completa e mais casos, verifique os 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

Se o seu projeto exigir suporte ao TypeScript, você também precisará instalar a dependência '@types/codemirror'.

npm install @types/codemirror -D

Registrar componente global

Não recomende componentes globais de registro , o que resultará no tipo de prompt no modelo que não pode ser obtido corretamente.

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

O nome do componente registrado global é Codemirror ou você pode personalizar um nome de componente, por exemplo:

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

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

Destaque da linguagem

Você pode clicar no link seguinte para visualizar casos de idioma correspondentes

• JavaScript
• JSON
• CSS
• html
• Apl
• Yaml

Mais casos estão sendo adicionados gradualmente e você também pode consultar o documento para obter mais modos de idioma.

Adeços de componentes

nome	descrição	tipo	padrão
Valor (V-Model)	Conteúdo do editor	string	""
opções	Opções de configuração do codemirror5	EditorConfiguration	Default_options
espaço reservado	Conteúdo de espaço reservado para editor para introduzir arquivos relacionados ao Codemirror	string	""
fronteira	Se deve exibir fronteiras do editor	boolean	false
largura	largura	string	100%
altura	altura	string	100%
estilo original	Usando o estilo original, desative a segunda modificação do estilo para este componente (mas não afeta a largura, a altura e a borda)	boolean	false
KeepCursorinend	Sempre mantenha a posição do mouse na última linha	boolean	false
mesclar	Modo de mesclagem, também pode ser usado como padrão de diff	boolean	false

Eventos

Eventos de componentes

Os três seguintes são apenas os eventos encapsulados por este componente. Consulte mais eventos de eventos Codemirror

Nome do evento	descrição	params
change	alterações de valor ou instância	(value: string, cm: Editor) => void
input	entrada	(value: string) => void
ready	O componente Codemirror é montado	(cm: Editor) => void;

---

Eventos Codemirror

Os eventos a seguir são eventos oficiais do Codemirror5. Você pode consultar os documentos oficiais para obter detalhes Codemirror Event ， Você pode usar este componente para vincular eventos diretamente através dos componentes, por exemplo:

< 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 os nomes de eventos são os seguintes:

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