simple code editor

Codeeditor simple para vue.js 3

Soporte para Vue.js 3

Sitio web: simple-code-editor.vicuxd.com

Es fácil de usar, tanto admite el modo de lectura y de edición con más de 200 temas, puede usarlo directamente en el navegador o importarlo a través del paquete NPM.

Uso

Hay 2 formas comunes en que puede usar el paquete simple-code-editor :

1. Vue en el navegador
2. Vue a través de NPM

1. Vue en el navegador

Paso 1. Agregue los archivos CSS.

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

Paso 2. Agregue los archivos JavaScript después del archivo vue.js

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

Paso 3. Declarando el componente y el uso de la etiqueta personalizada en la plantilla HTML.

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

 < code-editor > </ code-editor >

2. Uso con Vue a través de NPM

Paso 1. Instale el paquete desde NPM:

npm install simple-code-editor

Paso 2. Importar los módulos y el registro.

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

 < CodeEditor > </ CodeEditor > 

Accesorios

Boolean de solo lectura

Valor predeterminado: false

Descripción: habilitar editable o no

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

String de valor

Valor predeterminado: unset

Descripción: Configuración de contenido estático. Si requiere enlace de datos, utilice la propiedad: v-model

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

modelo V

Descripción: Varía según el valor del elemento o la salida de los componentes de las entradas de formulario

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

Nums de línea Boolean

Valor predeterminado: false

Descripción: Habilite los números de línea para mostrar o no, pero no se puede en modo de texto.

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

Array de idiomas

Predeterminado: [["javascript", "JS"]]

Descripción: [["Nombre del idioma", "Nombre de visualización"], ["Nombre del idioma", "Nombre de visualización"], ...]. La configuración de varios idiomas habilitará el selector de idiomas automáticamente, el nombre del idioma es necesario y el nombre de la pantalla es opcional

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

Múltiples idiomas:

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

Number de espacios de pestañas

Valor predeterminado: 2

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

envolver Boolean

Valor predeterminado: false

Descripción: Habilitar texto de envoltura o no

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

encabezado Boolean

Valor predeterminado: true

Descripción: habilitar el encabezado para mostrar o no

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

Boolean en idioma de pantalla

Valor predeterminado: true

Descripción: Habilite el nombre del idioma para mostrar o no

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

código de copia Boolean

Valor predeterminado: true

Descripción: Habilite el icono de copia para mostrar o no

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

String temas

Valor predeterminado: github-dark

Descripción: Cambio libremente entre más de 200 temas, verifique todos los temas

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

String del tamaño de una fuente

Valor predeterminado: 17px

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

String ancho

Valor predeterminado: 540px

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

String de altura

Valor predeterminado: auto

Descripción: La altura del contenedor es adaptativa de forma predeterminada, también se puede configurar como un valor específico y la barra de desplazamiento funcionará con desbordamiento

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

String de mínimo

Valor predeterminado: unset

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

mínimo de String

Valor predeterminado: unset

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

String de ancho máximo

Valor predeterminado: unset

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

String máxima de altura

Valor predeterminado: unset

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

String de relleno

Valor predeterminado: 20px

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

String de radio fronterizo

Valor predeterminado: 12px

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

String de ancho de la lista lang

Valor predeterminado: 110px

Descripción: El ancho de la lista de idiomas

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

String de altura de listón lang

Valor predeterminado: auto

Descripción: La altura de la lista de idiomas

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

Lang-List-Display Boolean

Valor predeterminado: false

Descripción: Habilitar la lista de idiomas para que se muestre de forma predeterminada o no

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

String de índice z

Valor predeterminado: 0

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

Boolean enfoque automático

Valor predeterminado: false

Descripción: Habilite TextAREA para concentrarse de forma predeterminada o no

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

Evento

@lang

Descripción: Pase el lenguaje actual como argumento

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

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

@contenido

Descripción: Pase el contenido estático como argumento

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

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

@Textarea

Descripción: Pase el elemento TextARea como argumento

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

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