simple code editor

Einfacher Codeditor für Vue.js 3

Unterstützung für Vue.js 3

Website: Simple-Code-editor.vicuxd.com

Es ist einfach zu bedienen, sowohl die schreibgeschützte als auch den Bearbeitungsmodus mit über 200 Themen zu verwenden. Sie können ihn direkt im Browser verwenden oder über das NPM-Paket importieren.

Verwendung

Es gibt zwei allgemeine Möglichkeiten, wie Sie das Paket simple-code-editor Paket verwenden können:

1. Vue im Browser
2. Vue vue NPM

1. Vue im Browser

Schritt 1. Fügen Sie die CSS -Dateien hinzu.

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

Schritt 2. Fügen Sie die JavaScript -Dateien nach der Datei vue.js hinzu.

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

Schritt 3. Deklarieren Sie die Komponente und verwenden Sie das angepasste Tag in die HTML -Vorlage.

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

 < code-editor > </ code-editor >

2. Verwendung mit Vue über NPM

Schritt 1. Installieren Sie das Paket von NPM:

npm install simple-code-editor

Schritt 2. Importieren der Module und Registrierung.

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

 < CodeEditor > </ CodeEditor > 

Requisiten

schreibgeschützte Boolean

Standard: false

Beschreibung: Aktivieren Sie bearbeitbar oder nicht

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

String

Standardeinstellung: unset

Beschreibung: Statische Inhaltseinstellung. Wenn Sie Datenbindung benötigen, verwenden Sie bitte die Eigenschaft: v-model

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

V-Model

Beschreibung: variiert basierend auf dem Wert des Formulareingangselements oder der Ausgabe von Komponenten

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

Linien-Nums Boolean

Standard: false

Beschreibung: Aktivieren Sie die Zeilennummern an

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

Sprachen Array

Standard: [["javascript", "JS"]]

Beschreibung: [["Sprachname", "Anzeigename"], ["Sprachname", "Anzeigename"], ...]. Die Einstellung mehrerer Sprachen aktiviert den Sprachwählers automatisch, der Sprachname ist erforderlich und der Anzeigename ist optional

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

Mehrere Sprachen:

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

Tablace- Number

Standard: 2

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

Booleschen Boolean

Standard: false

Beschreibung: Wrap -Text aktivieren oder nicht

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

Header Boolean

Standard: true

Beschreibung: Aktivieren Sie den Header zum Anzeigen oder nicht

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

Boolean Display-Sprache

Standard: true

Beschreibung: Aktivieren Sie den Sprachnamen zum Anzeigen oder nicht

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

kopieren Code Boolean

Standard: true

Beschreibung: Aktivieren Sie das Copy -Symbol zum Anzeigen oder nicht

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

String

Standard: github-dark

Beschreibung: Überprüfen Sie alle Themen frei zwischen über 200 Themen

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

Schriftgröße String

Standard: 17px

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

Breite String

Standard: 540px

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

String

Standard: auto

Beschreibung: Die Höhe des Containers ist standardmäßig adaptiv, kann auch als spezifischer Wert festgelegt werden, und die Bildlaufleiste funktioniert mit Überlauf

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

Min-Width- String

Standardeinstellung: unset

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

min-hohe String

Standardeinstellung: unset

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

Max- String

Standardeinstellung: unset

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

MAX-HEIGHT- String

Standardeinstellung: unset

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

String

Standard: 20px

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

Border-Radius- String

Standard: 12px

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

Lang-List- String

Standard: 110px

Beschreibung: Die Breite der Sprachliste

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

Langlist-hohe String

Standard: auto

Beschreibung: Die Höhe der Sprachliste

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

Langlist-Display Boolean

Standard: false

Beschreibung: Aktivieren Sie die Sprachliste, die standardmäßig angezeigt werden oder nicht

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

Z-Index String

Standard: 0

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

Autofokus Boolean

Standard: false

Beschreibung: Ermöglichen

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

Ereignis

@lang

Beschreibung: Übergeben Sie die aktuelle Sprache als Argument

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

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

@Inhalt

Beschreibung: Übergeben Sie den statischen Inhalt als Argument

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

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

@Textarea

Beschreibung: Übergeben Sie das Textbereichselement als Argument

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

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