Unduh react simple code editor - react simple code editor Sumber Download

react simple code editor

Sumber daya lainnya

Release 0.14.1

Unduh

react-simple-code-editor

Editor kode tanpa embel-embel sederhana dengan penyorotan sintaks.

Mengapa

Beberapa editor kode berbasis browser seperti ACE, Codemirror, Monako dll. Memberikan kemampuan untuk menyematkan editor kode berfitur lengkap di halaman web Anda. Namun, jika Anda hanya memerlukan editor sederhana dengan sintaksis sintaks tanpa fitur tambahan, mereka bisa berlebihan karena biasanya tidak memiliki jejak ukuran bundel kecil. Perpustakaan ini bertujuan untuk menyediakan editor kode sederhana dengan dukungan sorot sintaks tanpa fitur tambahan, sempurna untuk sematan dan formulir sederhana di mana pengguna dapat mengirimkan kode.

Fitur

Sigungan Sintaks Modular dengan Perpustakaan Pihak Ketiga
Baris indentasi atau teks yang dipilih dengan menekan tombol tab, dengan indentasi yang dapat disesuaikan
Indentasi otomatis pada baris baru
Bungkus teks yang dipilih dalam parens, kurung, atau kutipan
Batalkan seluruh kata, bukan surat demi surat
Dapat Diakses, Gunakan Ctrl+Shift+M (Mac) / Ctrl+M untuk Mengaktifkan Kunci Tab Penangkap

Instalasi

npm install react-simple-code-editor

atau

yarn add react-simple-code-editor

Penggunaan

Anda perlu menggunakan editor dengan perpustakaan pihak ketiga yang menyediakan penyorotan sintaksis. Misalnya, itu akan terlihat seperti mengikuti prismjs :

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

Perhatikan bahwa tergantung pada stabilo sintaks Anda, Anda mungkin harus menyertakan CSS tambahan untuk menyorot sintaks untuk berfungsi.

Alat peraga

Editor menerima semua alat peraga yang diterima oleh textarea . Selain itu, Anda dapat melewati alat peraga berikut:

value ( string ): Nilai saat ini dari editor yaitu kode yang akan ditampilkan. Ini harus menjadi penyangga yang terkontrol.
onValueChange ( string => mixed ): Callback yang disebut ketika nilai editor berubah. Anda harus memperbarui nilai prop saat ini dipanggil.
highlight ( string => string | React.Node ): Callback yang akan menerima teks untuk disorot. Anda harus mengembalikan string HTML atau elemen Bereaksi dengan sintaksis sintaksis menggunakan pustaka seperti prismjs .
tabSize ( number ): Jumlah karakter yang akan disisipkan saat menekan tombol tab. Misalnya, untuk 4 indentasi ruang, tabSize akan menjadi 4 dan insertSpaces akan menjadi true . Default: 2 .
insertSpaces ( boolean ): Apakah akan menggunakan spasi untuk lekukan. Default: true . Jika Anda mengaturnya ke false , Anda mungkin juga ingin mengatur tabSize ke 1 .
ignoreTabKey ( boolean ): Apakah editor harus mengabaikan tombol tab tekan sehingga pengguna keyboard dapat menabkan melewati editor. Pengguna dapat beralih perilaku ini menggunakan Ctrl+Shift+M (Mac) / Ctrl+M secara manual saat ini false . Default: false .
padding ( number ): Padding opsional untuk kode. Default: 0 .
textareaId ( string ): ID untuk textarea yang mendasarinya, dapat berguna untuk mengatur label .
textareaClassName ( string ): ClassName untuk textarea yang mendasarinya, dapat berguna untuk kontrol gayanya yang lebih tepat.
preClassName ( string ): ClassName untuk pre yang mendasarinya, dapat berguna untuk kontrol gayanya yang lebih tepat.

Demo

react-simple-code-editor.github.io/react-simple-code-editor

Cara kerjanya

Ini bekerja dengan overlay sintaks yang disorot <pre> blok di atas <textarea> . Saat Anda mengetik, memilih, menyalin teks dll., Anda berinteraksi dengan yang mendasari <textarea> , sehingga pengalaman terasa asli. Ini adalah pendekatan yang sangat sederhana dibandingkan dengan editor lain yang mengimplementasikan kembali perilaku tersebut.

Sorot sintaks dapat dilakukan oleh perpustakaan pihak ketiga mana pun selama mengembalikan HTML dan sepenuhnya dapat dikendalikan oleh pengguna.

Vanilla <textarea> tidak mendukung memasukkan karakter tab untuk indentasi, jadi kami mengimplementasikannya kembali dengan mendengarkan acara keydown dan secara terprogram memperbarui teks. Salah satu peringatan dengan memperbarui teks secara terprogram adalah bahwa kita kehilangan tumpukan undo, jadi kita perlu mempertahankan tumpukan undo kita sendiri. Akibatnya, kami juga dapat menerapkan peningkatan perilaku undo seperti membatalkan seluruh kata yang mirip dengan editor seperti VScode.

Batasan

Karena cara kerjanya, ia memiliki keterbatasan tertentu:

Kode yang disorot sintaks tidak dapat memiliki keluarga font yang berbeda, berat font, gaya font, tinggi garis, dll. Untuk isinya. Karena editor bekerja dengan menyelaraskan kode yang disorot lebih dari <textarea> , mengubah apa pun yang mempengaruhi tata letak dapat menyalurkannya.
Tumpukan Undo Custom tidak kompatibel dengan menu konteks browser undo/redo. Namun, editor fitur lengkap lainnya juga tidak mendukung item menu Undo/Redo Browser.
Editor tidak dioptimalkan untuk kinerja dan dokumen besar dapat mempengaruhi kecepatan pengetikan.
Kami menyembunyikan teks di TextArea menggunakan -webkit-text-fill-color: transparent , yang berfungsi di semua browser modern (bahkan yang non-Webkit seperti Firefox and Edge). Pada IE 10+, kami menggunakan color: transparent yang tidak menyembunyikan kursor. Teks mungkin tampak lebih berani di browser yang tidak didukung.