Editor teks Markdown WYSIWYG terintegrasi

Dalam mencari editor WYSIWYG langsung untuk kode penurunan harga, saya tidak menemukan UI yang sebanding dengan CkEditor, TinyMCE, dll.

Secara khusus, editor Markdown "WYSIWYG" yang sering direkomendasikan (seperti posting seperti ini ) bukanlah editor WYSIWYG murni dalam artian bahwa pengguna masih menulis Penurunan harga mentah ( MarkItUp ) atau beralih ke ekstrem lain dengan melakukan pengeditan sebaris tanpa kontrol standar ( Hallo ).

Saya butuh sesuatu di antaranya.

Saya mencari editor penurunan harga yang terlihat dan berfungsi seperti kotak teks CkEditor yang dipreteli, dan yang menerima dan mengeluarkan penurunan harga. Harus ada toolbar dengan set minimum opsi pemformatan (B, I, U, daftar, dll), dan area entri teks harus menunjukkan penurunan harga yang dikonversi, bukan kode mentah. Harus ada tombol Sumber yang akan memungkinkan pengguna untuk mengedit penurunan harga mentah, tetapi bahkan itu opsional. Ex:

Saya mendapatkan alasan penurunan harga / wiki, dll - keamanan yang ditawarkannya. Saya tidak keberatan memasukkan kode mentah seperti di sini di SE, tetapi pengguna saya bukan pecandu dan tidak menganggap ini menyenangkan. Mereka tidak ingin melihat * * * ___ dan spasi bercampur dengan teks mereka. Mereka terbiasa dengan gaya editing "Word", dan paling produktif di lingkungan itu.

Jadi - apakah ada editor WYSIWYG yang benar-benar terintegrasi untuk penurunan harga? Saya menulis dalam PHP, jadi sesuatu yang bisa saya panggil dengan kelas akan menjadi sempurna.

Pembaruan 23 September 2015

CKEditor sekarang memiliki addon penurunan harga yang melakukan hal yang persis seperti ini. Proyek addon di- host di github .

Tangkapan layar:

Pembaruan 13 Apr 2015
Seseorang yang mengaku mengembangkan CKEditor mengatakan bahwa kemunculan CommonMark adalah pengubah permainan, dan kita mungkin bisa melihat antarmuka markup yang tepat untuk CKEditor (baca komentar untuk cerita lengkapnya).

Pembaruan 6 Februari 2015

CKEditor sekarang hadir dengan plugin yang mengeluarkan (dan menerima sebagai masukan) BBCode.

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

Saya sedang meneliti subjek ini beberapa hari yang lalu dan saya belum menemukan editor WYSIWYG yang layak dengan output penurunan harga. Faktanya, pertama Anda harus membuat editor Markdown WYSIWG adalah editor HTML WYSIWG dan hanya ada beberapa yang dapat digunakan di pasaran.

Ada kemungkinan Anda dapat membuat dataProcessoruntuk CKEditor yang akan mengubah editor HTML menjadi editor penurunan harga. Kami punya plugin untuk BBCode yang bekerja seperti ini (lihat http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Yang harus Anda lakukan adalah mengimplementasikan antarmuka ini http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Jika Anda memeriksa kode plugin BBCode, Anda akan melihat beberapa peretasan dan trik, karena sayangnya arsitektur CKEditor saat ini belum siap (belum) untuk membuat pemroses data seperti itu. Namun, saya percaya bahwa jika Anda hanya ingin memberikan sedikit opsi gaya, Anda harus dapat menerapkan dukungan penurunan harga dengan cukup cepat.

SimpleMDE , pendatang baru, mungkin jawabannya. Saya telah mencari sesuatu seperti ini selama sebulan sekarang. Saya terkejut bahwa ini tidak muncul lebih tinggi dalam hasil pencarian. Saya harus melalui pemberitahuan di lepture / editor untuk menemukan ini.

EDIT 23 September 2015

CKEditor sekarang memiliki addon penurunan harga yang melakukan hal yang persis seperti ini. Proyek addon di- host di github .

Tangkapan layar:

Seperti yang diposting di pembaruan 6 Februari 2015 saya, CKEditor sekarang menyertakan plugin yang memungkinkan input dan output BBCode.

Demo tersedia di sini: http://ckeditor.com/demo#bbcode

EDIT 13 Apr 2015:
Seseorang yang mengaku mengembangkan CKEditor mengatakan bahwa kemunculan CommonMark adalah pengubah permainan, dan kami mungkin dapat melihat antarmuka markup yang tepat untuk CKEditor (baca komentar untuk cerita lengkapnya).

Pen adalah editor WYSIWYG baru (aktif pada 2014) yang mengeluarkan penurunan harga .
Itu tidak sempurna — saya punya masalah dengan menempelkan HTML di sana — tetapi berhasil.

Edit: Maaf! Itu tidak menghasilkan penurunan harga. Walery Strauch menunjukkan dalam komentar bahwa tanda pemformatan penurunan harga yang saya lihat sebenarnya adalah aturan elemen pseudo CSS:

Namun, saya akan membiarkannya di sini sebagai opsi karena beberapa orang memilih jawaban ini dan mungkin berguna bagi seseorang.

Saya menerapkan editor yang sangat sederhana yang memungkinkan konten <textarea>yang berisi penurunan harga diedit dengan cara WYSIWYG.

Saya menggunakan Hallo . Saya tidak berpikir situs webnya memperjelas bahwa ia sendiri bukan editor WYSIWYG penurunan harga tetapi demo itu memalsukan jalur ke salah satunya.

Hallo memungkinkan pengeditan WYSIWYG dari HTML di dalam a <div>. Saya menggunakan javascript untuk menyembunyikan <textarea>blok apa pun yang memiliki wysiwygkelas CSS tertentu , menggantinya dengan a <div>dan menyalin konten <textarea>ke file <div>. Penyalinan berjalan melalui Showdown yang menghasilkan HTML dari Markdown.

Rutinitas Javascript lain bereaksi setiap kali <div>konten berubah. Ini menyalin konten kembali ke (sekarang tersembunyi) <textarea>. Konten dijalankan melalui penurunan harga untuk mengkonversi dari HTML ke penurunan harga.

Jika <textarea>adalah bidang di <form>, maka penurunan harga yang diedit akan dikirim ke server saat formulir itu dikirim.

Inspirasi untuk ini berasal dari Contoh Penurunan Harga Hallo , khususnya file editor.js . Saya menggunakannya sebagai dasar untuk skrip saya sendiri bersama dengan hallo.js , showdown.js dan to-markdown.js .

Skrip saya, wysiwyg.js adalah turunan dari editor.js dari Contoh Penurunan Harga Hallo . Beberapa hal yang perlu diperhatikan:

• Saya menggunakan ini di aplikasi Rails (bukan itu yang penting)
• Ini berjalan readydan juga page:load, yang terakhir karena Rails menggunakan Turbolinks
• Ini berjalan ajaxCompletekarena saya menggunakan Ajax untuk laporan kesalahan formulir
• Ada dependensi lain: JQueryUI dan Rangy (pengguna Rails dapat memanfaatkan permata jquery-ui-rails dan rangy-rails ).
• Juga Font Awesome digunakan untuk ikon bilah alat. Versi demo yanghallo.js digunakan sudah kedaluwarsa (menggunakan versi lama Font Awesome ) - gunakan hallo.js dari GitHub sebagai gantinya.

Anda hanya perlu menambahkan CSS class='wysiwyg'ke mana saja <textarea>untuk mengaktifkan WYSIWYG di dalamnya. The <textarea>harus conain penurunan harga teks berformat.

Saya berharap bahwa wysiwyg.js dapat dengan mudah diadaptasi untuk menggunakan editor lain jika Anda tidak menyukai Hallo asalkan berfungsi pada HTML di file <div>. Ada beberapa untuk dipilih tetapi tidak semuanya seringan Hallo .

Sebuah karya serupa yang saya temukan adalah markdown-html-form . Ini menggunakan Showdown dan to-markdown yang sama .

Saya juga mencari editor penurunan harga yang dijelaskan di bagian atas utas ini

Pernahkah Anda melihat "alat penurunan harga": http://md-wysiwyg.sourceforge.net/

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

Itu tampaknya cukup dekat dengan apa yang kami cari, itu melakukan pekerjaan yang wajar untuk mengambil teks kaya WYSIWYG Anda dan mengeluarkan penurunan harga. Namun gagal pada pengecualian encoding ketika saya menempel di beberapa teks kaya dari dokumen google.