Editor teks Markdown WYSIWYG terintegrasi


101

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:

masukkan deskripsi gambar di sini

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:

penurunan harga WYSIWYG

sumber penurunan harga


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


Editor Ahola, seperti yang disarankan dalam jawaban ini untuk pertanyaan SO yang Anda tautkan adalah editor WYSIWYG HTML5 yang tampaknya melakukan apa yang Anda cari. Bahkan ada sedikit pita Office. Apakah ada alasan mengapa Anda mendiskon ini?
Chris

1
Sayangnya saya tidak bisa memahami komentar terakhir Anda. Ahola adalah "edit-di-tempat", seperti semua editor WYSIWYG. Kotak edit Aholda hanyalah a divdan bilah alat adalah yang lain div, ini bisa menjadi satu-satunya hal di halaman. Solusi Ahola memenuhi kebutuhan Anda untuk "set minimum opsi pemformatan (B, I, U, daftar, dll), dan area entri teks harus menampilkan penurunan harga yang dikonversi, bukan kode mentah." Tolong bisakah Anda menjelaskan lebih jelas mengapa ini bukan solusi yang akan Anda pertimbangkan.
Chris

1
Penurunan harga menggantikan semua editor WYSIWYG ini dengan sendirinya. Mengapa Anda perlu melakukan penurunan harga?
Pol

4
@Pol: Karena aman untuk disimpan dan ditampilkan nanti, bukan HTML?
Dan Abramov

1
Saya juga tidak mendapatkan pertanyaan ini. Baik Anda menggunakan Markdown untuk menghasilkan HTML atau Anda menggunakan editor WYSIWYG untuk menghasilkan HTML. Mengapa Anda ingin menggunakan editor WYSIWYG untuk menghasilkan penurunan harga? Jika itu benar-benar yang Anda inginkan, Anda selalu dapat menggunakan CKeditor dan mengubah HTML menjadi penurunan harga.
mb21

Jawaban:


13

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.


30

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.

masukkan deskripsi gambar di sini


1
Wow, terima kasih telah berbagi - inilah PERSIS yang saya cari. Hebat!
Jared White

1
Makasih HNL, sama di sini.
Melvin

4
Ini tidak benar WYSIWYG. Ini mencampur penurunan harga ke jendela editor. Apa yang dicari dalam pertanyaan ini adalah editor yang menampilkan tampilan akhir dan sumber dalam tampilan terpisah (dengan tombol 'sumber' pada toolbar, untuk gelisah).
seorang pembuat kode

9

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:

penurunan harga WYSIWYG

sumber penurunan harga


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).


"Apakah ini tepat?" Menurut kesamaan dari add-on ckeditor masih menghasilkan HTML dan bukan penurunan harga dengan add-on ini.
pengguna764754

8

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.


Demo pena adalah edit-di-tempat, bukan apa yang OP (saya) minati. Tidak ada waktu untuk menginstal saat ini juga. Apakah ada opsi kotak teks tradisional?
seorang pembuat kode

@Acoder: Saya buruk! Saya tidak menyadari Anda menginginkan toolbar tetap. Apa yang salah dengan Halo ? Itu memang memiliki toolbar sekarang ..
Dan Abramov

2
Ini masih tata letak css di tangkapan layar ini. Saya ingin mengambil data penurunan harga (lihat tangkapan layar saya i.imgur.com/fM4jFl2.png )
Walery Strauch

1
@WaleryStrauch Wow, saya benar-benar bodoh. Saya tidak menyadari itu sebenarnya bukan keluarannya. Maaf karena membuang waktumu! Saya akan memperbarui jawabannya.
Dan Abramov

3
..itu sekarang tampaknya memiliki setidaknya dukungan beta untuk mengeluarkan penurunan harga.
pjz

4

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 .


Hai @starfry, saya mencoba mereproduksi apa yang Anda jelaskan di atas menggunakan milik Anda wysiwyg.js, tetapi tidak berhasil. Ingin tahu apakah Anda memiliki HTML yang menyertai yang disimpan di suatu tempat juga? Daftar versi stabil dari dependensi, dll.? Terima kasih!
Jameson

1
@Jameson Saya telah menambahkan beberapa catatan ke intisari saya . Saya harap mereka membantu! Jangan ragu untuk menambahkan komentar ke intinya jika Anda memiliki pertanyaan.
starfry

3

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.


Kode sumber untuk yang satu ini menunjukkan HTML bukan penurunan harga.
seorang pembuat kode
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.