codemirror editor vue3

Perkenalan

简体中文

Komponen Codemirror dari Vue3. Komponen ini dikembangkan berdasarkan Codemirror 5 dan hanya VUE3 yang didukung.

Selain mode yang didukung secara resmi, mode presentasi output log ditambahkan, di luar kotak, tetapi tidak selalu cocok untuk semua skenario.

Untuk dokumentasi lengkap dan lebih banyak kasus, silakan periksa dokumen Codemirror-Editor-Vue3.

Memasang

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

Jika proyek Anda memerlukan dukungan TypeScript, Anda juga perlu menginstal ketergantungan '@type/codemirror'.

npm install @types/codemirror -D

Daftar Komponen Global

Jangan merekomendasikan komponen pendaftaran global , yang akan menghasilkan jenis prompt pada templat yang tidak dapat diperoleh dengan benar.

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" ) ;

Nama komponen terdaftar global adalah Codemirror atau Anda dapat menyesuaikan nama komponen, misalnya:

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

Gunakan dalam komponen

< 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 >

Sorotan bahasa

Anda dapat mengklik tautan berikut untuk melihat kasus bahasa yang sesuai

• Javascript
• json
• CSS
• html
• apl
• yaml

Lebih banyak kasus secara bertahap ditambahkan, dan Anda juga dapat merujuk ke dokumen untuk mencapai lebih banyak mode bahasa.

Alat peraga komponen

nama	keterangan	jenis	bawaan
nilai (v-model)	Konten editor	string	""
opsi	Opsi konfigurasi codemirror5	Konfigurasi Editor	Default_options
placeholder	Konten Placeholder Editor Untuk Memperkenalkan File Terkait Codemirror	string	""
berbatasan	Apakah akan menampilkan perbatasan editor	boolean	false
lebar	lebar	string	100%
tinggi	tinggi	string	100%
gaya asli	Menggunakan gaya asli, nonaktifkan modifikasi kedua gaya untuk komponen ini (tetapi tidak mempengaruhi lebar, tinggi, dan perbatasan)	boolean	false
KeepCursorinend	Selalu pertahankan posisi mouse di baris terakhir	boolean	false
menggabungkan	Mode gabungan, juga dapat digunakan sebagai pola diff	boolean	false

Acara

Acara Komponen

Tiga berikut hanya peristiwa yang dienkapsulasi oleh komponen ini. Silakan merujuk ke lebih banyak acara acara Codemirror

Nama Acara	keterangan	params
change	Nilai atau Instance Perubahan	(value: string, cm: Editor) => void
input	masukan	(value: string) => void
ready	Komponen codemirror dipasang	(cm: Editor) => void;

---

Acara Codemirror

Acara berikut adalah acara resmi Codemirror5. Anda dapat merujuk ke dokumen resmi untuk detail acara codemirror ， Anda dapat menggunakan komponen ini untuk mengikat acara secara langsung melalui komponen, misalnya:

< 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 "
/>

Semua nama acara adalah sebagai berikut ：

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