simple code editor

Codeeditor sederhana untuk vue.js 3

Dukungan untuk vue.js 3

Situs web: Simple-Code-Editor.vicuxd.com

Mudah digunakan, baik mendukung mode baca-saja dan edit dengan 200+ tema, Anda dapat langsung menggunakannya di browser atau mengimpornya melalui paket NPM.

Penggunaan

Ada 2 cara umum yang dapat Anda gunakan paket simple-code-editor :

1. Vue di browser
2. Vue melalui NPM

1. Vue di browser

Langkah 1. Tambahkan file CSS.

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

Langkah 2. Tambahkan file JavaScript setelah file vue.js

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

Langkah 3. Mendeklarasikan komponen, dan menggunakan tag yang disesuaikan ke dalam templat HTML.

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

 < code-editor > </ code-editor >

2. Penggunaan dengan Vue melalui NPM

Langkah 1. Instal paket dari NPM:

npm install simple-code-editor

Langkah 2. Mengimpor modul dan pendaftaran.

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

 < CodeEditor > </ CodeEditor > 

Alat peraga

BACA BACA-SATU Boolean

Default: false

Deskripsi: Aktifkan yang dapat diedit atau tidak

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

String nilai

Default: unset

Deskripsi: Pengaturan konten statis. Jika membutuhkan pengikatan data, silakan gunakan properti: v-model

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

V-model

Deskripsi: Bervariasi berdasarkan nilai elemen input formulir atau output komponen

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

line-nums Boolean

Default: false

Deskripsi: Aktifkan nomor baris untuk ditampilkan atau tidak, tetapi tidak dapat dalam mode teks bungkus

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

Array bahasa

Default: [["javascript", "JS"]]

Deskripsi: [["Nama Bahasa", "Nama Tampilan"], ["Nama Bahasa", "Nama Tampilan"], ...]. Pengaturan Berbagai Bahasa Akan Mengaktifkan Pemilih Bahasa Secara Otomatis, Nama Bahasa Diperlukan, dan Nama Tampilannya Opsional

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

Berbagai bahasa:

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

Number ruang tab

Default: 2

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

Bungkus Boolean

Default: false

Deskripsi: Aktifkan teks bungkus atau tidak

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

Header Boolean

Default: true

Deskripsi: Aktifkan header untuk ditampilkan atau tidak

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

Boolean -tampilan-bahasa

Default: true

Deskripsi: Aktifkan nama bahasa untuk ditampilkan atau tidak

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

Salin-kode Boolean

Default: true

Deskripsi: Aktifkan ikon salinan untuk ditampilkan atau tidak

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

String tema

Default: github-dark

Deskripsi: Beralih secara bebas antara 200+ tema, periksa semua tema

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

String ukuran font

Default: 17px

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

String lebar

Default: 540px

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

String tinggi

Default: auto

Deskripsi: Ketinggian wadah adaptif secara default, itu juga dapat ditetapkan sebagai nilai tertentu, dan bilah gulir akan bekerja dengan overflow

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

String Min-lebar

Default: unset

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

String tinggi min

Default: unset

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

String Max-Width

Default: unset

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

String max-height

Default: unset

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

String padding

Default: 20px

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

String perbatasan-radius

Default: 12px

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

String Lang-List-Lebar

Default: 110px

Deskripsi: Lebar daftar bahasa

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

String lang-list-height

Default: auto

Deskripsi: Ketinggian daftar bahasa

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

Lang-List-Display Boolean

Default: false

Deskripsi: Aktifkan daftar bahasa untuk ditampilkan secara default atau tidak

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

Z-index String

Default: 0

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

Autofocus Boolean

Default: false

Deskripsi: Aktifkan TextArea untuk fokus secara default atau tidak

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

Peristiwa

@lang

Deskripsi: Lulus bahasa saat ini sebagai argumen

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

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

@isi

Deskripsi: Lewati konten statis sebagai argumen

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

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

@TextArea

Deskripsi: Lewati elemen TextArea sebagai argumen

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

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