Trình soạn thảo văn bản Markdown WYSIWYG tích hợp

Khi tìm kiếm một trình soạn thảo WYSIWYG đơn giản cho mã Markdown, tôi không tìm thấy giao diện người dùng có thể so sánh được với giao diện người dùng của CkEditor, TinyMCE, v.v.

Cụ thể, trình chỉnh sửa Markdown "WYSIWYG" thường được đề xuất (chẳng hạn như các bài đăng như thế này ) không phải là trình chỉnh sửa WYSIWYG thuần túy theo nghĩa là người dùng vẫn viết Markdown thô ( MarkItUp ) hoặc đi đến một khía cạnh khác là chỉnh sửa nội dòng mà không có điều khiển tiêu chuẩn ( Hallo ).

Tôi cần một cái gì đó ở giữa.

Tôi đang tìm một trình soạn thảo Markdown trông và hoạt động giống như một hộp văn bản CkEditor được rút gọn, chấp nhận và xuất ra Markdown. Cần có một thanh công cụ với tập hợp tối thiểu các tùy chọn định dạng (B, I, U, danh sách, v.v.) và khu vực nhập văn bản phải hiển thị Markdown đã chuyển đổi, không phải mã thô. Cần có một nút Nguồn cho phép người dùng chỉnh sửa Markdown thô, nhưng ngay cả điều đó cũng là tùy chọn. Ví dụ:

Tôi hiểu lý do cho Markdown / wiki, v.v. - tính bảo mật mà nó cung cấp. Tôi không ngại nhập mã thô như ở đây tại SE, nhưng người dùng của tôi không phải là người đam mê và không thấy điều này thú vị. Họ không muốn nhìn thấy * * * ___ và dấu cách xen lẫn trong văn bản của họ. Họ đã quen với việc chỉnh sửa kiểu "Word" và hiệu quả nhất trong môi trường đó.

Vậy - có một trình soạn thảo WYSIWYG thực sự tích hợp cho Markdown không? Tôi đang viết bằng PHP, vì vậy thứ gì đó mà tôi có thể gọi với một lớp sẽ rất hoàn hảo.

Cập nhật ngày 23 tháng 9 năm 2015

CKEditor hiện có một addon Markdown thực hiện điều này chính xác. Dự án addon được lưu trữ trên github .

Ảnh chụp màn hình:

Ngày 13 tháng 4 năm 2015 Cập nhật
Ai đó tuyên bố phát triển CKEditor nói rằng sự xuất hiện của CommonMark là một yếu tố thay đổi trò chơi và chúng ta có thể thấy một giao diện đánh dấu thích hợp cho CKEditor (đọc phần bình luận cho toàn bộ câu chuyện).

Ngày 6 tháng 2 năm 2015 Cập nhật

CKEditor hiện đi kèm với một plugin xuất ra (và chấp nhận làm đầu vào) BBCode.

Demo: http://ckeditor.com/demo#bbcode

Tôi đã nghiên cứu về chủ đề này một ngày và tôi không tìm thấy bất kỳ trình soạn thảo WYSIWYG nào phù hợp với đầu ra Markdown. Trên thực tế, trước tiên bạn phải tạo một trình soạn thảo WYSIWG Markdown là trình soạn thảo WYSIWG HTML và chỉ có một vài trong số chúng có thể sử dụng được trên thị trường.

Có một cơ hội là bạn sẽ có thể tạo dataProcessorcho CKEditor để thay đổi trình soạn thảo HTML thành trình chỉnh sửa Markdown. Chúng tôi có một plugin cho BBCode hoạt động như thế này (xem http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Tất cả những gì bạn phải làm là triển khai giao diện này http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Nếu bạn kiểm tra mã của plugin BBCode, bạn sẽ thấy một số hack và thủ thuật, bởi vì rất tiếc, kiến ​​trúc của CKEditor hiện tại chưa sẵn sàng (chưa) để tạo một bộ xử lý dữ liệu như vậy. Tuy nhiên, tôi tin rằng nếu bạn chỉ muốn cung cấp một số tùy chọn tạo kiểu, bạn sẽ có thể triển khai hỗ trợ Markdown khá nhanh.

SimpleMDE , một người mới, có thể là câu trả lời. Tôi đã tìm kiếm một thứ như thế này trong một tháng nay. Tôi ngạc nhiên rằng điều này không hiển thị cao hơn trong kết quả tìm kiếm. Tôi đã phải xem qua một thông báo trên lepture / editor để tìm điều này.

CHỈNH SỬA ngày 23 tháng 9 năm 2015

CKEditor hiện có một addon Markdown thực hiện điều này chính xác. Dự án addon được lưu trữ trên github .

Ảnh chụp màn hình:

Như đã đăng trong bản cập nhật ngày 6 tháng 2 năm 2015 của tôi, CKEditor hiện bao gồm các plugin cho phép đầu vào và đầu ra BBCode.

Bản demo có sẵn tại đây: http://ckeditor.com/demo#bbcode

CHỈNH SỬA Ngày 13 tháng 4 năm 2015:
Một người nào đó tuyên bố phát triển CKEditor nói rằng sự xuất hiện của CommonMark là một công cụ thay đổi trò chơi và chúng ta có thể thấy một giao diện đánh dấu thích hợp cho CKEditor (đọc nhận xét cho toàn bộ câu chuyện).

Pen là một trình soạn thảo WYSIWYG mới (hoạt động kể từ năm 2014), xuất ra Markdown .
Nó không hoàn hảo — tôi đã gặp vấn đề với việc dán HTML vào đó — nhưng nó hoạt động.

Chỉnh sửa: Xin lỗi! Nó không xuất ra Markdown. Walery Strauch đã chỉ ra trong các nhận xét rằng các dấu hiệu định dạng Markdown mà tôi thấy thực sự là các quy tắc phần tử giả CSS:

Tuy nhiên, tôi sẽ để nó ở đây như một tùy chọn vì một số người đã ủng hộ câu trả lời này và nó có thể đã được sử dụng cho ai đó.

Tôi đã triển khai một trình soạn thảo rất đơn giản cho phép <textarea>chỉnh sửa nội dung của một chứa Markdown theo kiểu WYSIWYG.

Tôi đã sử dụng Hallo . Tôi không nghĩ rằng trang web của nó cho thấy rõ ràng rằng bản thân nó không phải là một trình soạn thảo Markdown WYSIWYG nhưng bản trình diễn đã tạo ra đường dẫn đến một.

Hallo cho phép chỉnh sửa WYSIWYG HTML bên trong a <div>. Tôi đã sử dụng javascript để ẩn bất kỳ <textarea>khối nào có wysiwyglớp CSS cụ thể , thay thế nó bằng a <div>và sao chép nội dung của <textarea>vào <div>. Việc sao chép chạy qua Showdown tạo HTML từ Markdown.

Một quy trình Javascript khác phản ứng mỗi khi <div>nội dung thay đổi. Nó sao chép nội dung trở lại (hiện đã bị ẩn) <textarea>. Nội dung được chạy qua đánh dấu để chuyển đổi từ HTML sang Markdown.

Nếu <textarea>là một trường trong dấu <form>, thì Markdown đã chỉnh sửa sẽ được gửi đến máy chủ khi biểu mẫu đó được gửi.

Nguồn cảm hứng cho điều này đến từ Ví dụ Hallo Markdown , cụ thể là tệp editor.js . Tôi đã sử dụng điều đó làm cơ sở cho tập lệnh của riêng mình cùng với hallo.js , showdown.js và to-markdown.js .

Tập lệnh của tôi, wysiwyg.js là một dẫn xuất của editor.js từ Ví dụ Hallo Markdown . Một số điểm cần lưu ý:

• Tôi sử dụng cái này trong một ứng dụng Rails (không quan trọng)
• Nó chạy trên readyvà cũng trênpage:load , sau này vì Rails sử dụng Turbolinks
• Nó chạy trên ajaxComplete vì tôi sử dụng Ajax cho các báo cáo lỗi biểu mẫu
• Có các phụ thuộc khác: JQueryUI và Rangy (Người dùng Rails có thể tận dụng các gem jquery-ui-rails và rangy-rails ).
• Cũng Font tạo ảnh vui nhộn được sử dụng cho các biểu tượng trên thanh công cụ. Các phiên bản của hallo.jssử dụng bởi các bản demo đã hết hạn (nó sử dụng một phiên bản cũ của Font tạo ảnh vui nhộn ) - sử dụng hallo.js từ GitHub để thay thế.

Bạn chỉ cần thêm CSS class='wysiwyg'vào bất kỳ <textarea>để kích hoạt WYSIWYG trên đó. Các <textarea>nên conain Markdown định dạng văn bản.

Tôi hy vọng rằng wysiwyg.js có thể dễ dàng điều chỉnh để sử dụng trình soạn thảo khác nếu bạn không thích Hallo miễn là nó hoạt động trên HTML trong a <div>. Có khá nhiều loại để lựa chọn nhưng không phải loại nào cũng nhẹ như Hallo .

Một công việc tương tự mà tôi tìm thấy là markdown-html-form . Nó sử dụng cùng một Showdown và to-markdown .

Tôi cũng đang tìm một trình chỉnh sửa đánh dấu được mô tả ở đầu chủ đề này

Bạn đã thấy "công cụ đánh dấu" chưa: http://md-wysiwyg.sourceforge.net/

Demo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Điều đó có vẻ khá gần với những gì chúng tôi đang tìm kiếm, nó thực hiện một công việc hợp lý là lấy văn bản đa dạng thức WYSIWYG của bạn và đánh dấu đầu ra. Tuy nhiên, nó không thành công trong một ngoại lệ mã hóa khi tôi dán một số văn bản có định dạng từ tài liệu google.