simple code editor

Codeeditor simple pour vue.js 3

Prise en charge de Vue.js 3

Site Web: Simple-Code-diditor.vicuxd.com

Il est facile à utiliser, à la fois en charge unique et en mode d'édition avec plus de 200 thèmes, vous pouvez l'utiliser directement dans le navigateur ou l'importer via le package NPM.

Usage

Il existe 2 façons courantes que vous puissiez utiliser le package simple-code-editor :

1. Vue dans le navigateur
2. Vue via NPM

1. Vue dans le navigateur

Étape 1. Ajoutez les fichiers CSS.

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

Étape 2. Ajoutez les fichiers JavaScript après le fichier vue.js

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

Étape 3. Déclarer le composant et utiliser la balise personnalisée dans le modèle HTML.

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

 < code-editor > </ code-editor >

2. Utilisation avec Vue via NPM

Étape 1. Installez le package à partir de NPM:

npm install simple-code-editor

Étape 2. Importation des modules et de l'enregistrement.

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

 < CodeEditor > </ CodeEditor > 

Accessoires

Boolean en lecture seule

Par défaut: false

Description: Activer ou non

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

valeur String valeur

Par défaut: unset

Description: Paramètre de contenu statique. Si vous avez besoin de liaison de données, veuillez utiliser la propriété: v-model

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

modèle en V

Description: Varie en fonction de la valeur des entrées de formulaire élément ou sortie des composants

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

LINE-NUMS Boolean

Par défaut: false

Description: Activez les numéros de ligne à afficher ou non, mais incapables en mode texte enveloppe

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

Array des langues

Par défaut: [["javascript", "JS"]]

Description: [["" Nom de la langue "," nom d'affichage "], [" Nom de la langue "," nom d'affichage "], ...]. Le paramètre de plusieurs langues permettra automatiquement le sélecteur de langue, le nom de la langue est nécessaire et le nom d'affichage est facultatif

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

Plusieurs langues:

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

Number d'espaces d'onglet

Par défaut: 2

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

envelopper Boolean

Par défaut: false

Description: Activer le texte enveloppé ou non

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

tête Boolean

Par défaut: true

Description: permettez à l'en-tête d'afficher ou non

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

Boolean en langage d'affichage

Par défaut: true

Description: Activer le nom de la langue pour afficher ou non

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

code de copie Boolean

Par défaut: true

Description: activer l'icône de copie pour afficher ou non

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

chaîne String

Par défaut: github-dark

Description: basculer librement entre plus de 200 thèmes, vérifiez tous les thèmes

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

String de taille de police

Par défaut: 17px

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

String largeur

Par défaut: 540px

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

String de hauteur

Par défaut: auto

Description: La hauteur du conteneur est adaptative par défaut, elle peut également être définie comme une valeur spécifique, et la barre de défilement fonctionnera avec un débordement

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

String de largeur min

Par défaut: unset

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

String min-hauteur

Par défaut: unset

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

String de largeur maximale

Par défaut: unset

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

String max-hauteur

Par défaut: unset

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

String rembourrage

Par défaut: 20px

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

corde de radius String

Par défaut: 12px

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

chaîne Lang-list- String

Par défaut: 110px

Description: La largeur de la liste des langues

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

Lang-list- String

Par défaut: auto

Description: la hauteur de la liste des langues

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

Lang-list-display Boolean

Par défaut: false

Description: Activer la liste des langues à afficher par défaut ou non

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

String z-index

Par défaut: 0

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

Autofocus Boolean

Par défaut: false

Description: permettez à TextArea de se concentrer par défaut ou non

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

Événement

@lang

Description: Passez le langage actuel comme argument

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

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

@contenu

Description: Passez le contenu statique comme argument

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

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

@TextArea

Description: Passez l'élément TextArea comme argument

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

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