الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

Codeeditor البسيط لـ Vue.js 3

دعم Vue.js 3

موقع الويب: Simple-Code-Editor.Vicuxd.com

من السهل الاستخدام ، كلاهما يدعم وضع القراءة فقط والتحرير مع أكثر من 200 موضوع ، يمكنك استخدامه مباشرة في المتصفح أو استيراده عبر حزمة NPM.

الاستخدام

هناك طريقتان شائعتان يمكنك استخدام حزمة 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.

الوصف: يختلف بناءً على قيمة عنصر إدخال النموذج أو إخراج المكونات 

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

خط 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 Max-Width

الافتراضي: 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 >

سلسلة Lang-List- String

الافتراضي: 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 >

Z-Index String

الافتراضي: 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 ( ) ;
}
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل