Textarea có thể làm nổi bật cú pháp khi đang bay?

203

Tôi đang lưu trữ một số khối HTML bên trong CMS vì lý do bảo trì dễ dàng hơn. Chúng được đại diện bởi <textarea>s.

Có ai biết một Widget JavaScript nào đó có thể làm nổi bật cú pháp cho HTML trong một textareahoặc tương tự, trong khi vẫn giữ một trình soạn thảo văn bản đơn giản (không có WYSIWYG hoặc các chức năng nâng cao) không?

javascript  html  richtextbox  widget  highlighting 
— Bắc Kinh
nguồn
1
Liệu W3C có thể làm cho textarealinh hoạt hơn và có thể mở rộng hơn trong phiên bản tương lai của đặc tả (X) HTML và các tiêu chuẩn liên quan không?
— James Haigh
3
@ FabienMénager liên kết trùng lặp của bạn đã bị xóa.
— Patrick Roberts
3
Điều này sẽ giúp codepen.io/kazzkiq/pen/xGXaKR
— Shan Eapen Koshy

Câu trả lời:

217

Không thể đạt được mức độ kiểm soát cần thiết đối với việc trình bày trong một văn bản thông thường.

Nếu bạn ổn với điều đó, hãy thử CodeMirror hoặc Ace (trước đây là skywriter và bespin ) hoặc Monaco (được sử dụng trong MS VSCode).

Từ chuỗi trùng lặp - một liên kết wikipedia bắt buộc: http://en.wikipedia.org/wiki/Comparison_of_JavaScript-basing_source_code_editors

— Nickolay
nguồn
3
Trên thực tế, Bespin sử dụng dự phòng textarea thông thường để thêm hỗ trợ cho trình đọc màn hình (vì vậy người khuyết tật cũng có thể dễ dàng sử dụng nó).
— Eli Gray
2
CodeMirror trông giống hệt những gì tôi cần. Miễn là nó hoạt động như một textarea, tôi cảm thấy thoải mái với nó không phải là một.
— Pekka
1
Cảm ơn bạn đã trả lời. Tìm thấy điều này sau khi đọc phản hồi của bạn và nó thổi vào tâm trí của tôi! :) github.com/securingsincity/react-ace
— Casey
27

Đây là câu trả lời tôi đã thực hiện cho một câu hỏi tương tự ( Trình chỉnh sửa mã trực tuyến ) trên các lập trình viên :

Trước tiên, bạn có thể xem bài viết này:
Wikipedia - So sánh các trình soạn thảo mã nguồn dựa trên JavaScript .

Để biết thêm, đây là một số công cụ có vẻ phù hợp với yêu cầu của bạn:

  • EditArea - Demo dưới dạng FileEditor là tiện ích mở rộng Yii - ( Giấy phép phần mềm Apache, BSD, LGPL )

    Đây là EditArea, một trình soạn thảo javascript miễn phí cho mã nguồn. Nó cho phép viết mã nguồn được hình thành tốt với số lượng dòng, hỗ trợ tab, tìm kiếm & thay thế (với biểu thức chính quy) và tô sáng cú pháp trực tiếp (có thể tùy chỉnh).

  • CodePress - Bản demo của Joomla! Plugin CodePress - ( LGPL ) - Nó không hoạt động trong Chrome và có vẻ như quá trình phát triển đã ngừng lại.

    CodePress là trình soạn thảo mã nguồn dựa trên web với cú pháp tô sáng được viết bằng JavaScript, tô màu văn bản theo thời gian thực trong khi nó được nhập vào trình duyệt.

  • CodeMirror - Một trong nhiều bản demo - ( giấy phép kiểu MIT + hỗ trợ thương mại tùy chọn )

    CodeMirror là một thư viện JavaScript có thể được sử dụng để tạo giao diện soạn thảo tương đối dễ chịu cho nội dung giống như mã - chương trình máy tính, đánh dấu HTML và tương tự. Nếu một chế độ đã được viết cho ngôn ngữ bạn đang chỉnh sửa, mã sẽ được tô màu và trình chỉnh sửa sẽ tùy ý giúp bạn thụt lề

  • Biên tập viên Ace Ajax Cloud9 - Bản trình diễn - ( Mozilla ba giấy phép (MPL / GPL / LGPL) )

    Ace là một trình soạn thảo mã độc lập được viết bằng JavaScript. Mục tiêu của chúng tôi là tạo ra một trình soạn thảo mã dựa trên web phù hợp và mở rộng các tính năng, khả năng sử dụng và hiệu suất của các trình soạn thảo gốc hiện có như TextMate, Vim hoặc Eclipse. Nó có thể dễ dàng nhúng vào bất kỳ trang web và ứng dụng JavaScript nào. Ace được phát triển với tư cách là biên tập viên chính cho Cloud9 IDE và là người kế thừa của Dự án Mozilla Skywriter (Bespin).

— Pascal Qyy
nguồn
1
Ôi điều này thật là chán nản ... 100 dự án được cho là sẽ làm điều này, và hoàn toàn không có dự án nào hoạt động.
— RobinJ
Giấy phép của biên tập viên Ace đã được đổi thành BSD github.com/ajaxorg/ace/blob/master/LICENSE
— S.Krishna
7

Cập nhật: Bespin hiện là ACE, được đề cập bởi câu trả lời được đánh giá cao nhất tại đây. Sử dụng ACE thay thế.

Phải đi với Bespin của Mozilla. Nó được xây dựng bằng các tính năng HTML5 (vì vậy nó nhanh và nhanh, nhưng không hỗ trợ các trình duyệt cũ), nhưng chắc chắn là tuyệt vời khi sử dụng và đánh bại mọi thứ tôi gặp phải - có lẽ là do Mozilla hỗ trợ và họ phát triển Firefox nên vâng. .. Ngoài ra còn có một Plugin jQuery chứa phần mở rộng cho nó để làm cho nó dễ sử dụng hơn với jQuery.

— balupton
nguồn
2

Trình chỉnh sửa duy nhất mà tôi biết có tính năng tô sáng cú pháp và dự phòng cho textarea là Mozilla Bespin . Google xung quanh để nhúng Bespin để xem cách nhúng trình chỉnh sửa. Trang web duy nhất tôi biết sử dụng điều này ngay bây giờ là Thư viện Mozilla Jetpack rất alpha (trong trang gửi Jetpack) và bạn có thể muốn xem họ bao gồm nó như thế nào.

Ngoài ra còn có một bài đăng blog về nhúng và sử dụng lại trình soạn thảo Bespin có thể giúp bạn.

— Eli Gray
nguồn
Ace là sự kế thừa cho dự án Mozilla Bespin.
— Zachary Keener
1

Tại sao bạn đại diện cho họ là textareas? Đây là sở thích của tôi:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Nhưng nếu bạn đang sử dụng CMS, có lẽ có một plugin tốt hơn. Ví dụ: wordpress có phiên bản phát triển:

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

— Matrym
nguồn
15
Các plugin này không cho phép tô sáng cú pháp nhanh như trong văn bản
— Fabien Ménager
1
Liên kết bị hỏng.
— bắt chước
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.