simple code editor

codeeditor ง่ายสำหรับ vue.js 3

สนับสนุน vue.js 3

เว็บไซต์: simple-code-editor.vicuxd.com

ใช้งานง่ายทั้งสองรองรับโหมดอ่านอย่างเดียวและแก้ไขด้วยธีมกว่า 200+ คุณสามารถใช้โดยตรงในเบราว์เซอร์หรือนำเข้าผ่านแพ็คเกจ NPM

การใช้งาน

มี 2 วิธีทั่วไปที่คุณสามารถใช้แพ็คเกจ simple-code-editor :

1. Vue ในเบราว์เซอร์
2. Vue ผ่าน NPM

1. VUE ในเบราว์เซอร์

ขั้นตอนที่ 1. เพิ่มไฟล์ CSS

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

ขั้นตอนที่ 2. เพิ่มไฟล์ JavaScript หลังจากไฟล์ vue.js

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

ขั้นตอนที่ 3. การประกาศส่วนประกอบและใช้แท็กที่กำหนดเองลงในเทมเพลต HTML

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

 < code-editor > </ code-editor >

2. การใช้งานกับ Vue ผ่าน NPM

ขั้นตอนที่ 1. ติดตั้งแพ็คเกจจาก NPM:

npm install simple-code-editor

ขั้นตอนที่ 2. การนำเข้าโมดูลและการลงทะเบียน

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

 < CodeEditor > </ CodeEditor > 

อุปกรณ์ประกอบฉาก

Boolean อ่านอย่างเดียว

ค่าเริ่มต้น: false

คำอธิบาย: เปิดใช้งานได้หรือไม่

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

String ค่า

ค่าเริ่มต้น: unset

คำอธิบาย: การตั้งค่าเนื้อหาคงที่ หากต้องการการเชื่อมโยงข้อมูลโปรดใช้คุณสมบัติ: v-model

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

V-model

คำอธิบาย: แตกต่างกันไปตามค่าขององค์ประกอบอินพุตฟอร์มหรือเอาต์พุตของส่วนประกอบ

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

line-nums Boolean

ค่าเริ่มต้น: false

คำอธิบาย: เปิดใช้งานหมายเลขบรรทัดเพื่อแสดงหรือไม่ แต่ไม่สามารถอยู่ในโหมดข้อความห่อ

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

Array ภาษา

ค่าเริ่มต้น: [["javascript", "JS"]]

คำอธิบาย: [["ชื่อภาษา", "แสดงชื่อ"], ["ชื่อภาษา", "ชื่อแสดง"], ... ] การตั้งค่าหลายภาษาจะเปิดใช้งานตัวเลือกภาษาโดยอัตโนมัติชื่อภาษาเป็นสิ่งจำเป็นและชื่อที่แสดงเป็นทางเลือก

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

หลายภาษา:

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

Number แท็บช่องว่าง

ค่าเริ่มต้น: 2

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

ห่อ Boolean

ค่าเริ่มต้น: false

คำอธิบาย: เปิดใช้งานข้อความห่อหรือไม่

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

Boolean ส่วนหัว

ค่าเริ่มต้น: true

คำอธิบาย: เปิดใช้งานส่วนหัวเพื่อแสดงหรือไม่

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

Boolean แสดงภาษา

ค่าเริ่มต้น: true

คำอธิบาย: เปิดใช้งานชื่อภาษาเพื่อแสดงหรือไม่

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

บูลีนรหัส Boolean

ค่าเริ่มต้น: true

คำอธิบาย: เปิดใช้งานไอคอนคัดลอกเพื่อแสดงหรือไม่

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

สตริง String

ค่าเริ่มต้น: github-dark

คำอธิบาย: การสลับระหว่างธีมมากกว่า 200 รายการอย่างอิสระตรวจสอบธีมทั้งหมด

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

สตริงขนาด String

ค่าเริ่มต้น: 17px

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

String ความกว้าง

ค่าเริ่มต้น: 540px

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

String ความสูง

ค่าเริ่มต้น: auto

คำอธิบาย: ความสูงของคอนเทนเนอร์ถูกปรับให้เข้ากับค่าเริ่มต้นนอกจากนี้ยังสามารถตั้งค่าเป็นค่าเฉพาะและแถบเลื่อนจะทำงานกับล้น

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

String ความกว้างขั้นต่ำ

ค่าเริ่มต้น: unset

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

String ความสูงขั้นต่ำ

ค่าเริ่มต้น: unset

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

String ความกว้างสูงสุด

ค่าเริ่มต้น: unset

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

String ความสูงสูงสุด

ค่าเริ่มต้น: unset

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

String รัด

ค่าเริ่มต้น: 20px

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

String ชายแดน

ค่าเริ่มต้น: 12px

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

String ความกว้างของ Lang

ค่าเริ่มต้น: 110px

คำอธิบาย: ความกว้างของรายการภาษา

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

String Lang-List-Height

ค่าเริ่มต้น: auto

คำอธิบาย: ความสูงของรายการภาษา

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

Lang-List-Display Boolean

ค่าเริ่มต้น: false

คำอธิบาย: เปิดใช้งานรายการภาษาเพื่อแสดงตามค่าเริ่มต้นหรือไม่

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

String z-index

ค่าเริ่มต้น: 0

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

Boolean ออโต้โฟกัส

ค่าเริ่มต้น: false

คำอธิบาย: เปิดใช้งาน textarea เพื่อมุ่งเน้นโดยค่าเริ่มต้นหรือไม่

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

เหตุการณ์

@lang

คำอธิบาย: ส่งผ่านลิ้นปัจจุบันเป็นอาร์กิวเมนต์

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

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

@เนื้อหา

คำอธิบาย: ผ่านเนื้อหาคงที่เป็นอาร์กิวเมนต์

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

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

@TextArea

คำอธิบาย: ผ่านองค์ประกอบ textarea เป็นอาร์กิวเมนต์

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

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