Ein toter einfacher Code -Editor mit Syntax -Hervorhebung und Zeilennummern. 3kb/z
Der Editor arbeitet sowohl für Vue 2.x als auch für Vue 3.x und Sie befinden sich derzeit in der Filiale, die Vue 2.x unterstützt. Gehen Sie hier für die vue 3.x -kompatible Version
prism-editor.netlify.com
Mehrere browserbasierte Code-Editoren wie ACE, Codemirror, Monaco usw. bieten die Möglichkeit, einen Codeditor mit vollem Funktionsumfang in Ihre Webseite einzubetten. Wenn Sie jedoch nur einen einfachen Editor mit Syntax -Hervorhebung ohne die zusätzlichen Funktionen benötigen, können sie übertrieben werden, da sie normalerweise keinen kleinen Fußabdruck mit einer kleinen Bündelgröße haben. Diese Bibliothek zielt darauf ab, einen einfachen Code -Editor mit Syntax -Highlight -Support ohne zusätzliche Funktionen zu bieten, perfekt für einfache Einbettungen und Formulare, bei denen Benutzer Code einreichen können.
npm install vue-prism-editoroder
yarn add vue-prism-editorSie müssen den Editor mit einer Drittanbieterbibliothek verwenden, die eine Syntax -Hervorhebung bietet. Zum Beispiel wird es so aussehen, als würde man mit Prismjs folgen:
Registrieren Sie die Komponente lokal und verwenden Sie sie (empfohlen)
< template >
< prism-editor class =" my-editor " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ template >
< script >
// import Prism Editor
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles somewhere
// import highlighting library (you can use any library you want just return html string)
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism-tomorrow.css' ; // import syntax highlighting styles
export default {
components : {
PrismEditor ,
} ,
data : ( ) => ( { code : 'console.log("Hello World")' } ) ,
methods : {
highlighter ( code ) {
return highlight ( code , languages . js ) ; // languages.<insert language> to return html with markup
} ,
} ,
} ;
</ script >
< style >
/* required class */
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example: */
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >Beachten Sie, dass Sie je nach Syntax Highlighter möglicherweise zusätzliche CSS für die Arbeitssyntax -Hervorhebung einbeziehen müssen.
Oder registrieren Sie die Komponente weltweit
import { PrismEditor } from 'vue-prism-editor' ;
import 'vue-prism-editor/dist/prismeditor.min.css' ; // import the styles
Vue . component ( 'PrismEditor' , PrismEditor ) ;Browserverbrauch (für Codepen usw.):
< script src =" https://unpkg.com/[email protected].* " > </ script >
<!-- Prism Editor -->
< script src =" https://unpkg.com/vue-prism-editor " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/vue-prism-editor/dist/prismeditor.min.css " />
<!-- custom highlighter: -->
< script src =" https://unpkg.com/prismjs/prism.js " > </ script >
< link rel =" stylesheet " href =" https://unpkg.com/prismjs/themes/prism-tomorrow.css " />
< style >
.height-200{
height: 200px
}
.my-editor {
/* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
background: #2d2d2d;
color: #ccc;
/* you must provide font-family font-size line-height. Example:*/
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional class for removing the outline */
.prism-editor__textarea:focus {
outline: none;
}
</ style >
< div id =" app " >
< prism-editor class =" my-editor height-200 " v-model =" code " :highlight =" highlighter " line-numbers > </ prism-editor >
</ div >
< script >
new Vue ( {
el : "#app" ,
data : ( ) => ( {
code : "console.log('hello world')"
} ) ,
methods : {
highlighter ( code ) {
// js highlight example
return Prism . highlight ( code , Prism . languages . js , "js" ) ;
}
} ,
} )
</ script > | Name | Typ | Standard | Optionen | Beschreibung |
|---|---|---|---|---|
V- value | string | "" | - - | Der aktuelle Wert des Editors, dh der zu angezeigte Code |
| Highlight | string => string | - - | - - | Rückruf, der Text zum Hervorhebung erhält. Sie müssen eine HTML -String mit Syntax -Hervorhebung mit einer Bibliothek wie PrismJs zurückgeben. |
| Readonly | Boolean | false | - - | Readonly |
| Leinenzahl | Boolean | false | - - | Ob Zeilennummern anzeigen. Standard false |
| Autostylelinenumbers | Boolean | true | - - | Übereinstimmen Zeilennummern Textfarbe mit dem Thema. Standard true |
| tabse | number | 2 | - - | Die Anzahl der Zeichen, die beim Drücken der Registerkarte einfügen sollen. Zum Beispiel wird für 4 Space Engitation tabSize 4 und insertSpaces true sein. Standard: 2 |
| Einfügungsräume | boolean | true | - - | Ob Sie Räume für die Eindrückung verwenden möchten. Standard: true . Wenn Sie es auf false festlegen, möchten Sie möglicherweise auch tabSize auf 1 festlegen |
| Ignorettabkey | boolean | false | - - | Unabhängig davon, ob der Editor die Registerkarte ignorieren sollte, drückt die Taste, damit die Tastaturbenutzer den Editor überschreiten können. Benutzer können dieses Verhalten unter Verwendung von Ctrl+Shift+M (MAC) / Ctrl+M manuell umschalten, wenn dies false ist. Standard: false |
| Name | Parameter | Beschreibung |
|---|---|---|
| Eingang | (code) | Feuert, wenn der Code geändert wird. |
| Schlüsseldown | (event) | Dieses Ereignis wird ausgestrahlt, wenn ein Schlüsseldown -Ereignis im Editor stattfindet |
| Schlüssel | (event) | Dieses Ereignis wird ausgestrahlt, wenn ein Schlüsselereignis im Herausgeber stattfindet |
| klicken | (event) | Diese Veranstaltung wird beim Klicken überall im Editor ausgestrahlt |
| Fokus | (event) | Dieses Ereignis wird beim Fokus ausgestrahlt |
| verwischen | (event) | Dieses Ereignis wird ausstrahlt, wenn sie verschwommen sind |
Dieser Teil stammt aus React-Simple-Code-Editor
Es funktioniert durch Überlagern einer von Syntax hervorgehobenen <pre> Block über einen <textarea> . Wenn Sie Text eingeben, auswählen, kopieren usw., interagieren Sie mit der zugrunde liegenden <textarea> , sodass sich die Erfahrung nativ anfühlt. Dies ist ein sehr einfacher Ansatz im Vergleich zu anderen Herausgebern, die das Verhalten erneut implementieren.
Die Syntax -Hervorhebung kann von einer beliebigen Bibliothek von Drittanbietern durchgeführt werden, solange sie HTML zurückgibt und vom Benutzer vollständig kontrollierbar ist.
Die Vanilla <textarea> unterstützt das Einfügen von Registerkarte für die Eindringung nicht. Daher implementieren wir sie erneut, indem wir keydown -Ereignisse anhören und den Text programmgesteuert aktualisieren. Eine Einschränkung mit programmatisch aktualisiertem Text ist, dass wir den Rückgängigungsstapel verlieren. Daher müssen wir unseren eigenen Rückgängerstapel beibehalten. Infolgedessen können wir auch ein verbessertes Rückgängigmachungsverhalten implementieren, z.
Aufgrund der Funktionsweise hat es bestimmte Einschränkungen:
<textarea> ausgerichtet ist, kann das Ändern von allem, was das Layout beeinflusst, ihn falsch ausrichten.-webkit-text-fill-color: transparent , das in allen modernen Browsern (sogar nicht-wirfkiten wie Firefox und Edge) funktioniert. Auf IE 10+ verwenden wir color: transparent , das den Cursor nicht versteckt. Text kann in nicht unterstützten Browsern mutiger erscheinen. React-Simple-Code-Editor
MIT
