Textarea yang dapat melakukan penyorotan sintaks dengan cepat?

203

Saya menyimpan sejumlah blok HTML di dalam CMS untuk alasan perawatan yang lebih mudah. Mereka diwakili oleh <textarea>s.

Apakah ada yang tahu Widget JavaScript dari beberapa jenis yang dapat melakukan penyorotan sintaksis untuk HTML dalam textareaatau serupa, sambil tetap menggunakan editor teks biasa (tidak ada WYSIWYG atau fungsi lanjutan)?

javascript html richtextbox widget highlighting Pekka
sumber
1
Mungkinkah W3C dapat membuat textarealebih fleksibel dan fleksibel dalam versi masa depan dari spesifikasi (X) HTML dan standar terkait?
James Haigh
3
@ FabienMénager tautan duplikat Anda telah dihapus.
Patrick Roberts
3
Ini akan membantu codepen.io/kazzkiq/pen/xGXaKR
Shan Eapen Koshy

Jawaban:

217

Tidak mungkin untuk mencapai tingkat kontrol yang diperlukan atas presentasi dalam textarea biasa.

Jika Anda setuju dengan hal itu, coba CodeMirror atau Ace (sebelumnya penulis skenario dan bespin ) , atau Monako (digunakan dalam MS VSCode).

Dari utas rangkap - tautan wikipedia wajib: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

Nickolay
sumber
3
Sebenarnya, Bespin menggunakan fallback textarea biasa untuk menambahkan dukungan untuk pembaca layar (sehingga orang cacat dapat dengan mudah menggunakannya juga).
Eli Gray
2
CodeMirror persis seperti yang saya butuhkan. Selama itu berperilaku seperti textarea, saya nyaman dengan itu bukan menjadi textarea.
Pekka
1
Terima kasih atas jawabannya. Menemukan ini setelah membaca respons Anda dan itu mengejutkan saya! :) github.com/securingsincity/react-ace
Casey
27

Berikut adalah respons yang telah saya lakukan terhadap pertanyaan serupa ( Editor Kode Online ) pada programmer :

Pertama, Anda dapat melihat artikel ini:
Wikipedia - Perbandingan editor kode sumber berbasis JavaScript .

Untuk lebih lanjut, berikut adalah beberapa alat yang sepertinya sesuai dengan permintaan Anda:

  • EditArea - Demo sebagai FileEditor yang merupakan Ekstensi Yii - ( Lisensi Perangkat Lunak Apache, BSD, LGPL )

    Berikut adalah EditArea, editor javascript gratis untuk kode sumber. Ini memungkinkan untuk menulis kode sumber yang diformat dengan baik dengan numerotasi garis, dukungan tab, pencarian & penggantian (dengan regexp) dan penyorotan sintaksis langsung (dapat disesuaikan).

  • CodePress - Demo Joomla! Plugin CodePress - ( LGPL ) - Tidak berfungsi di Chrome dan sepertinya pengembangan telah berhenti.

    CodePress adalah editor kode sumber berbasis web dengan penyorotan sintaksis ditulis dalam JavaScript yang warna teks secara real time saat sedang diketik di browser.

  • CodeMirror - Salah satu dari banyak demo - ( lisensi gaya MIT + dukungan komersial opsional )

    CodeMirror adalah perpustakaan JavaScript yang dapat digunakan untuk membuat antarmuka editor yang relatif menyenangkan untuk konten seperti kode - program komputer, markup HTML, dan sejenisnya. Jika mode telah ditulis untuk bahasa yang Anda edit, kode akan berwarna, dan editor secara opsional akan membantu Anda dengan indentasi

  • Ace Ajax.org Cloud9 Editor - Demo - ( Mozilla tri-lisensi (MPL / GPL / LGPL) )

    Ace adalah editor kode mandiri yang ditulis dalam JavaScript. Tujuan kami adalah untuk membuat editor kode berbasis web yang cocok dan memperluas fitur, kegunaan dan kinerja editor asli yang ada seperti TextMate, Vim atau Eclipse. Dapat dengan mudah disematkan di halaman web dan aplikasi JavaScript apa pun. Ace dikembangkan sebagai editor utama untuk Cloud9 IDE dan penerus Proyek Mozilla Skywriter (Bespin).

Pascal Qyy
sumber
1
Oh, ini benar-benar menyedihkan ... 100 proyek yang seharusnya melakukan ini, dan sama sekali tidak ada yang berhasil.
RobinJ
Lisensi editor Ace telah diubah menjadi BSD github.com/ajaxorg/ace/blob/master/LICENSE
S.Krishna
9

Saya akan merekomendasikan EditArea untuk mengedit langsung sintaksis textarea hightlighted.

Daniel Bardi
sumber
7

Pembaruan: Bespin sekarang ACE, yang disebutkan oleh jawaban berperingkat tertinggi di sini. Gunakan ACE sebagai gantinya.

Harus pergi dengan Bespin oleh Mozilla. Itu dibangun menggunakan fitur HTML5 (jadi cepat dan cepat, tetapi tidak mendukung browser lama), tapi pasti luar biasa untuk menggunakan dan mengalahkan semua yang saya temui - mungkin karena itu adalah Mozilla yang mendukungnya, dan mereka mengembangkan Firefox jadi ya. .. Ada juga Plugin jQuery yang berisi ekstensi untuk membuatnya sedikit lebih mudah digunakan dengan jQuery.

balupton
sumber
6

Anda dapat menyorot teks dalam <textarea>, menggunakan <div>ditempatkan dengan hati - hati di belakangnya.

periksa Highlight Text Inside a Textarea .

E99
sumber
2

Satu-satunya editor yang saya tahu memiliki highlight sintaksis dan fallback ke textarea adalah Mozilla Bespin . Google berkeliling karena menyematkan Bespin untuk melihat cara menyematkan editor. Satu-satunya situs yang saya tahu yang menggunakan ini sekarang adalah Mozilla Jetpack Gallery yang sangat alfa (dalam mengirimkan halaman Jetpack) dan Anda mungkin ingin melihat bagaimana mereka memasukkannya.

Ada juga posting blog tentang penyematan dan penggunaan kembali editor Bespin yang dapat membantu Anda.

Eli Gray
sumber
Ace adalah penerus proyek Mozilla Bespin.
Zachary Keener
1

Mengapa Anda mewakili mereka sebagai textareas? Ini adalah favorit saya:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Tetapi jika Anda menggunakan CMS, mungkin ada plugin yang lebih baik. Sebagai contoh, wordpress memiliki versi yang dikembangkan:

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

Matrym
sumber
15
Plugin ini tidak memungkinkan penyorotan sintaksis on-the-fly seperti dalam textarea
Fabien Ménager
1
Tautan rusak.
meniru