codemirror editor vue3

مقدمة

简体中文

مكون Codemirror من Vue3. تم تطوير هذا المكون على أساس Codemirror 5 ويدعم Vue3 فقط.

بالإضافة إلى الأوضاع المدعومة رسميًا ، تتم إضافة وضع عرض إخراج السجل ، خارج الصندوق ، ولكن ليس بالضرورة مناسبًا لجميع السيناريوهات.

للحصول على وثائق كاملة والمزيد من الحالات ، يرجى التحقق من مستندات Codemirror-Editor-Vue3.

ثَبَّتَ

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 " 

pnpm i codemirror-editor-vue3 codemirror@^5 -S

إذا كان مشروعك يتطلب دعم TypeScript ، فستحتاج أيضًا إلى تثبيت تبعية "types/codemirror".

npm install @types/codemirror -D

تسجيل المكون العالمي

لا توصي بمكونات التسجيل العالمية ، والتي ستؤدي إلى نوع المطالبة في القالب الذي لا يمكن الحصول عليه بشكل صحيح.

main.js:

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

اسم المكون المسجل العالمي هو CodeMirror أو يمكنك تخصيص اسم مكون ، على سبيل المثال:

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ; 

استخدام في المكونات

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

تسليط الضوء على اللغة

يمكنك النقر فوق الرابط التالي لعرض حالات اللغة المقابلة

• جافا سكريبت
• جيسون
• CSS
• HTML
• APL
• يامل

تتم إضافة المزيد من الحالات تدريجياً ، ويمكنك أيضًا الرجوع إلى المستند لتحقيق المزيد من أوضاع اللغة.

الدعائم المكونة

اسم	وصف	يكتب	تقصير
القيمة (نموذج V)	محتوى المحرر	string	"" "
خيارات	خيارات التكوين من Codemirror5	تحرير التكوين	default_options
عنصر نائب	محتوى المحرر للمحتوى لتقديم الملفات ذات الصلة CodeMirror	string	"" "
حدود	ما إذا كنت تريد عرض حدود المحرر	boolean	false
عرض	عرض	string	100%
ارتفاع	ارتفاع	string	100%
النمط الأصلي	باستخدام النمط الأصلي ، قم بتعطيل التعديل الثاني للنمط لهذا المكون (ولكن لا يؤثر على العرض والارتفاع والحدود)	boolean	false
KeepCursorInend	احتفظ دائمًا بوضع الماوس على السطر الأخير	boolean	false
دمج	وضع الدمج ، يمكن أيضًا استخدامه كنمط فرق	boolean	false

الأحداث

أحداث المكون

الثلاثة التالية هي الأحداث التي تغلفها هذا المكون فقط. يرجى الرجوع إلى المزيد من الأحداث أحداث Codemirror

اسم الحدث	وصف	params
change	تغييرات القيمة أو المثيل	(value: string, cm: Editor) => void
input	مدخل	(value: string) => void
ready	تم تركيب مكون Codemirror	(cm: Editor) => void;

---

أحداث Codemirror

الأحداث التالية هي الأحداث الرسمية لـ Codemirror5. يمكنك الرجوع إلى المستندات الرسمية للحصول على تفاصيل حدث Codemirror ， يمكنك استخدام هذا المكون لربط الأحداث مباشرة من خلال المكونات ، على سبيل المثال ：

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>

جميع أسماء الأحداث هي كما يلي ：

• changes
• scroll
• beforeChange
• cursorActivity
• keyHandled
• inputRead
• electricInput
• beforeSelectionChange
• viewportChange
• swapDoc
• gutterClick
• gutterContextMenu
• focus
• blur
• refresh
• optionChange
• scrollCursorIntoView
• update