simple code editor

CodeEditor simples para vue.js 3

Apoio ao Vue.js 3

Site: simples código-editor.vicuxd.com

É fácil de usar, suporta o modo somente leitura e edição com mais de 200 temas, você pode usá-lo diretamente no navegador ou importá-lo através do pacote NPM.

Uso

Existem 2 maneiras comuns de usar o pacote simple-code-editor :

1. Vue no navegador
2. Vue via npm

1. Vue no navegador

Etapa 1. Adicione os arquivos CSS.

 < link rel =" stylesheet " href =" themes.css " />
< link rel =" stylesheet " href =" themes-base16.css " />
< link rel =" stylesheet " href =" simple-code-editor.css " />

Etapa 2. Adicione os arquivos JavaScript após o arquivo vue.js

 < script src =" highlight.min.js " > </ script >
< script src =" simple-code-editor.js " > </ script >

Etapa 3. Declarando o componente e usando a tag personalizada no modelo HTML.

 const app = Vue . createApp ( {
  components : {
    "code-editor" : CodeEditor ,
  } ,
} ) ; 

 < code-editor > </ code-editor >

2. Uso com Vue via NPM

Etapa 1. Instale o pacote do NPM:

npm install simple-code-editor

Etapa 2. Importação dos módulos e registro.

 import hljs from 'highlight.js' ;
import CodeEditor from "simple-code-editor" ;
export default {
  components : {
    CodeEditor ,
  } ,
} ; 

 < CodeEditor > </ CodeEditor > 

Adereços

Boolean somente leitura

Padrão: false

Descrição: Ativar editável ou não

 < CodeEditor :read-only =" true " > </ CodeEditor >

String de valor

PADRÃO: unset

Descrição: Configuração de conteúdo estático. Se exigir ligação de dados, use a propriedade: v-model

 < CodeEditor value =" console.log(13) " > </ CodeEditor >

Model V.

Descrição: Varia com base no valor do elemento de entrada de formulários ou saída de componentes

 < CodeEditor v-model =" demo " > </ CodeEditor > < CodeEditor v-model =" demo " > </ CodeEditor >

line-nums Boolean

Padrão: false

Descrição: Ativar números de linha a serem exibidos ou não, mas incapazes no modo de texto de embrulho

 < CodeEditor :line-nums =" true " > </ CodeEditor >

Array de idiomas

Padrão: [["javascript", "JS"]]

Descrição: [["Nome do idioma", "Nome de exibição"], ["Nome do idioma", "Nome de exibição"], ...]. A configuração de vários idiomas permitirá o seletor de idiomas automaticamente, o nome do idioma é necessário e o nome da exibição é opcional

 < CodeEditor :languages =" [['cpp', 'C++']] " />

Múltiplos idiomas:

 < CodeEditor :languages =" [['cpp', 'C++'],['python', 'Python'],['php', 'PHP']] " />

Number espaços de guias

Padrão: 2

 < CodeEditor :tab-spaces =" 4 " > </ CodeEditor >

Enrole Boolean

Padrão: false

Descrição: Habilite o textão de envoltório ou não

 < CodeEditor :wrap =" true " > </ CodeEditor >

Cabeçalho Boolean

Padrão: true

Descrição: Ative o cabeçalho para mostrar ou não

 < CodeEditor :header =" true " > </ CodeEditor >

Boolean de exibição no idioma

Padrão: true

Descrição: Ativar o nome do idioma para mostrar ou não

 < CodeEditor :display-language =" false " > </ CodeEditor >

copie-código Boolean

Padrão: true

Descrição: Ative o ícone de cópia para mostrar ou não

 < CodeEditor :copy-code =" false " > </ CodeEditor >

String tema

Padrão: github-dark

Descrição: alternar livremente entre mais de 200 temas, verifique todos os temas

 < CodeEditor theme =" github-dark " > </ CodeEditor >

String de tamanho de fonte

Padrão: 17px

 < CodeEditor font-size =" 20px " > </ CodeEditor >

String de largura

Padrão: 540px

 < CodeEditor width =" 100% " > </ CodeEditor >

String de altura

Padrão: auto

Descrição: A altura do contêiner é adaptável por padrão, ele também pode ser definido como um valor específico, e a barra de rolagem funcionará com transbordamento

 < CodeEditor height =" 150px " > </ CodeEditor >

String de largura de min

PADRÃO: unset

 < CodeEditor min-width =" 200px " > </ CodeEditor >

String de altura da minia

PADRÃO: unset

 < CodeEditor min-height =" 200px " > </ CodeEditor >

String máxima de largura

PADRÃO: unset

 < CodeEditor max-width =" 1000px " > </ CodeEditor >

String max-hight

PADRÃO: unset

 < CodeEditor max-height =" 200px " > </ CodeEditor >

String de preenchimento

Padrão: 20px

 < CodeEditor padding =" 30px " > </ CodeEditor >

String -Radius de fronteira

Padrão: 12px

 < CodeEditor border-radius =" 4px " > </ CodeEditor >

String de largura de Lang

Padrão: 110px

Descrição: a largura da lista de idiomas

 < CodeEditor lang-list-width =" 150px " > </ CodeEditor >

String de altura da lista de lang

Padrão: auto

Descrição: A altura da lista de idiomas

 < CodeEditor lang-list-height =" 70px " > </ CodeEditor >

Lang-List-Display Boolean

Padrão: false

Descrição: Ativar lista de idiomas a ser mostrada por padrão ou não

 < CodeEditor :lang-list-display =" true " > </ CodeEditor >

String z-index

Padrão: 0

 < CodeEditor z-index =" 6 " > </ CodeEditor >

foco automático Boolean

Padrão: false

Descrição: Ative a textarea para se concentrar por padrão ou não

 < CodeEditor :autofocus =" true " > </ CodeEditor > 

Evento

@lang

Descrição: Passe o Languange atual como argumento

 < CodeEditor @lang =" getLanguage " > </ CodeEditor > 

 getLanguage ( lang ) {
  console . log ( "The current language is: " + lang ) ;
}

@contente

Descrição: Passe o conteúdo estático como um argumento

 < CodeEditor @content =" getContent " > </ CodeEditor > 

 getContent ( content ) {
  console . log ( "The content is: " + content ) ;
}

@TexTarea

Descrição: Passe o elemento textarea como argumento

 < CodeEditor @textarea =" focus " > </ CodeEditor > 

 focus ( node ) {
  node . focus ( ) ;
}