Entegre Markdown WYSIWYG metin editörü


101

Markdown kodu için basit bir WYSIWYG editörü ararken, CkEditor, TinyMCE, vb. İle karşılaştırılabilir bir kullanıcı arayüzü bulamıyorum.

Özellikle, Markdown "WYSIWYG" (örneğin gibi mesajlar sık tavsiye edilir editörler bu ), kullanıcıların ya hala ham Markdown (yazma anlamında değil saf WYSIWYG düzenleyicileri olan MarkItUp ) ya da olmadan düzenleme in-line sahip diğer aşırı gidin standart kontroller ( Hallo ).

Arada bir şeye ihtiyacım var.

Soyulmuş bir CkEditor metin kutusu gibi görünen ve işlev gören ve Markdown'u kabul eden ve çıkaran bir Markdown editörü arıyorum. Minimum biçimlendirme seçeneklerine (B, I, U, listeler, vb.) Sahip bir araç çubuğu olmalı ve metin giriş alanı, ham kodu değil dönüştürülen Markdown'u göstermelidir. Kullanıcıların ham Markdown'u düzenlemelerine izin verecek bir Kaynak düğmesi olmalıdır, ancak bu bile isteğe bağlıdır. Ör:

görüntü açıklamasını buraya girin

Markdown / wiki'nin nedenini anlıyorum, vb - sunduğu güvenlik. SE'de olduğu gibi ham kodu girmeyi umursamıyorum, ancak kullanıcılarım geeks değil ve bunu eğlenceli bulmuyor. Metinleriyle karışık * * * ___ ve boşlukları görmek istemiyorlar. "Kelime" stili düzenlemeye alışkındırlar ve bu ortamda en üretkenler.

Peki - Markdown için gerçekten entegre bir WYSIWYG editörü var mı? Bir PHP ile yazıyorum, böylece bir sınıfla çağırabileceğim bir şey mükemmel olurdu.


23 Eylül 2015 Güncellemesi

CKEditor artık tam olarak bunu yapan bir Markdown eklentisine sahip. Eklenti projesi github'da barındırılmaktadır .

Ekran görüntüleri:

markdown WYSIWYG

indirim kaynağı


13 Nisan 2015 Güncelleme
CKEditor'u geliştirdiğini iddia eden biri, CommonMark'ın görünümünün bir oyun değiştirici olduğunu ve CKEditor için uygun bir işaretleme arayüzü görebileceğimizi söylüyor (hikayenin tamamı için yorumları okuyun).


6 Şubat 2015 Güncellemesi

CKEditor artık BBCode çıktısı veren (ve girdi olarak kabul eden) bir eklenti ile birlikte geliyor.

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


Ahola Editor, bağlantı kurduğunuz SO sorusuna verilen bu yanıtta önerildiği gibi, tam olarak peşinde olduğunuz şeyi yapan bir HTML5 WYSIWYG editörüdür. Hatta Office şeridinin bir ipucu var. Bunu düşürmenizin bir nedeni var mı?
Chris

1
Korkarım son yorumunuzu gerçekten anlayamıyorum. Ahola, tüm WYSIWYG editörleri gibi "yerinde düzenleme" dir. Aholda düzenleme kutusu sadece bir divve araç çubuğu başka bir divşey, bunlar sayfadaki tek şeyler olabilir. Ahola çözümü, "minimum biçimlendirme seçenekleri kümesi (B, I, U, listeler, vb.) İçin gereksinimlerinizi karşılar ve metin giriş alanı, ham kodu değil dönüştürülen Markdown'u göstermelidir." Lütfen bunun neden dikkate alacağınız bir çözüm olmadığını daha net açıklar mısınız?
Chris

1
Markdown, tüm bu WYSIWYG editörlerinin yerini alır. Neden indirime gitmeniz gerekiyor?
Pol

4
@Pol: HTML yerine daha sonra saklamak ve görüntülemek güvenli olduğu için mi?
Dan Abramov

1
Ben de bu soruyu anlamıyorum. Ya HTML oluşturmak için Markdown kullanırsınız ya da HTML oluşturmak için bir WYSIWYG düzenleyici kullanırsınız. Markdown oluşturmak için neden bir WYSIWYG editörü kullanmak isteyesiniz? Gerçekten istediğiniz buysa, her zaman CKeditor'u kullanabilir ve HTML'yi Markdown'a dönüştürebilirsiniz.
mb21

Yanıtlar:


13

Geçen gün bu konuda araştırma yapıyordum ve Markdown çıktılı düzgün bir WYSIWYG editörü bulamadım. Aslında, önce bir WYSIWG oluşturmalısınız Markdown editörü WYSIWG HTML editörüdür ve piyasada kullanılabilen sadece birkaçı vardır.

dataProcessorHTML editörünü Markdown düzenleyicisine dönüştürecek CKEditor için yaratma şansınız var . BBCode için bu şekilde çalışan bir eklentimiz var ( http://nightly-v4.ckeditor.com/3737/samples/bbcode.html bakın ).

Tek yapmanız gereken bu arayüzü http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor uygulamaktır . BBCode eklentisinin kodunu kontrol ederseniz, bazı hackler ve püf noktaları göreceksiniz, çünkü ne yazık ki mevcut CKEditor mimarisi böyle bir veri işlemcisi oluşturmak için hazır değil (henüz). Bununla birlikte, yalnızca birkaç stil seçeneği sunmak istiyorsanız, Markdown desteğini oldukça hızlı bir şekilde uygulayabilmeniz gerektiğine inanıyorum.


30

Yeni gelen SimpleMDE cevap olabilir. Bir aydır bunun gibi bir şey arıyordum. Bunun arama sonuçlarında daha yüksek görünmemesine şaşırdım. Bunu bulmak için lepture / editör ile ilgili bir duyuru incelemek zorunda kaldım .

görüntü açıklamasını buraya girin


1
Vay canına, bunu paylaştığınız için teşekkürler - tam olarak aradığım şey buydu. Harika!
Jared Beyaz

1
Teşekkürler HNL, burada da aynı.
Melvin

4
Gerçi doğru WYSIWYG değil. Markdown'ı editör penceresine karıştırır. Bu soruda aranan, hem bitmiş görünümü hem de kaynağı ayrı görünümlerde gösteren bir düzenleyicidir (kıpırdatmak için araç çubuğunda bir 'kaynak' düğmesi ile).
a coder

9

DÜZENLEME Eylül 23, 2015

CKEditor artık tam olarak bunu yapan bir Markdown eklentisine sahip. Eklenti projesi github'da barındırılmaktadır .

Ekran görüntüleri:

markdown WYSIWYG

indirim kaynağı


6 Şubat 2015 güncellememde yayınladığım gibi, CKEditor artık BBCode giriş ve çıkışına izin veren eklentiler içeriyor.

Burada bir demo mevcuttur: http://ckeditor.com/demo#bbcode

DÜZENLEME Nisan 13, 2015:
CKEditor'u geliştirmeyi iddia eden biri, CommonMark'ın görünümünün bir oyun değiştirici olduğunu ve CKEditor için uygun bir işaretleme arayüzü görebileceğimizi söylüyor (hikayenin tamamı için yorumları okuyun).


"Bu tam olarak mı?" Eklenti ckeditor'un ortak yanlarına göre, bu eklenti ile Markdown değil, HTML çıktısı verir.
user764754

8

Pen , Markdown çıktısı veren yeni (2014 itibariyle aktif) bir WYSIWYG editörüdür.
Mükemmel değil — HTML'yi oraya yapıştırma konusunda sorunlar yaşadım — ama işe yarıyor.

Düzenleme: Üzgünüz! Markdown çıktısı vermez. Walery Strauch , yorumlarda gördüğüm Markdown biçimlendirme işaretlerinin aslında CSS sözde öğe kuralları olduğuna dikkat çekti:

Yine de, bazı insanlar bu cevaba oy verdiğinden ve birilerinin işine yaramış olabileceğinden, onu burada bir seçenek olarak bırakacağım.


Kalem demosu, OP'nin (ben) ilgilendiği / ilgilendiği şey değil, yerinde düzenlemedir. Bu saniye kurmaya vakit yok. Geleneksel bir metin kutusu seçeneği var mı?
kodlayıcı

@Acoder: Benim hatam! Sabit bir araç çubuğu istediğinizi fark etmemiştim. Halo'nun nesi var ? Artık bir araç çubuğu var ..
Dan Abramov

2
Bu hala bu ekran görüntüsündeki css düzenidir. Markdown verilerini almak istiyorum ( i.imgur.com/fM4jFl2.png ekran görüntüsüne bir göz atın )
Walery

1
@WaleryStrauch Vay canına, gerçekten aptallık ettim. Bunun gerçekten çıktı olmadığını fark etmemiştim. Zamanını harcadığım için üzgünüm! Cevabı güncelleyeceğim.
Dan Abramov

3
..it şimdi Markdown'u çıkarmak için en azından beta desteğine sahip görünüyor.
pjz

4

<textarea>Markdown içeren bir içeriğin WYSIWYG tarzında düzenlenmesine izin veren çok basit bir düzenleyici uyguladım .

Hallo kullandım . Web sitesinin kendisinin bir Markdown WYSIWYG editörü olmadığını açıkça ortaya koyduğunu sanmıyorum, ancak demo , bir Markdown'a giden yolu açıyor.

Hallo , WYSIWYG'nin bir <div>. Ben herhangi gizlemek için javascript kullanılan <textarea>spesifik engellemeleri wysiwygbir ile yerine CSS sınıfı <div>ve içeriğini kopyalayarak <textarea>içine <div>. Kopyalama , Markdown'dan HTML üreten Showdown aracılığıyla gerçekleştirilir .

Başka bir Javascript rutini, <div>içerik her değiştiğinde tepki verir . İçeriği geri kopyalar (şimdi gizlidir) <textarea>. İçerik yoluyla çalıştırılan to-markdown HTML gelen Markdown için dönüştürmek için.

Eğer <textarea>bir alanı içindedir <formo form gönderildiğinde>, daha sonra düzenlenen Markdown sunucusuna gönderilir.

Bunun ilham kaynağı Hallo Markdown Örneğinden , özellikle editor.js dosyasından geliyor. Hallo.js , showdown.js ve to- markdown.js ile birlikte bunu kendi komut dosyam için temel olarak kullandım .

Komut dosyam , wysiwyg.js , Hallo Markdown Örneğindeki editor.js'nin bir türevidir . Dikkat edilmesi gereken bazı noktalar:

  • Bunu bir Rails uygulamasında kullanıyorum (önemli olan bu değil)
  • İkincisi, Rails Turbolinks kullandığı için devam ediyor readyve çalışıyor.page:load
  • Bu üzerinde çalışan ajaxCompleteben form hata raporları için Ajax kullandığından
  • Başka bağımlılıklar da vardır: JQueryUI ve Rangy (Rails kullanıcıları gems jquery-ui-rails ve rangy-raylardan yararlanabilir ).
  • Ayrıca , araç çubuğu simgeleri için Font Awesome kullanılır. Demohallo.js tarafından kullanılan sürümü güncel değil ( Font Awesome'in eski bir sürümünü kullanıyor ) - bunun yerine GitHub'dan hallo.js'yi kullanın.

Üzerinde WYSIWYG'yi etkinleştirmek class='wysiwyg'için yalnızca CSS eklemeniz <textarea>gerekir. <textarea>Markdown biçimlendirilmiş metin conain gerekir.

Bunu beklerdim wysiwyg.js kolayca beğenmezseniz başka editörü kullanımı adapte edilebilir Hallo uzun bir HTML üzerinde çalışır gibi <div>. Aralarından seçim yapabileceğiniz epeyce var ama hepsi Hallo kadar hafif değil .

Bulduğum daha benzer bir çalışma parçası markdown-html-form . Aynı Showdown ve markdown için kullanır .


Hey @starfry, yukarıda anlattıklarını seninkini kullanarak yeniden oluşturmaya çalıştım wysiwyg.jsama büyük başarılar elde etmedim. Size eşlik eden bir HTML'inizin de bir yerde bir özet olarak saklanıp saklanmadığını merak mı ediyorsunuz? Bağımlılıkların kararlı sürüm listesi vb.? Teşekkürler!
Jameson

1
@Jameson benim için bazı notlar eklemiş özünden . Umarım yardımcı olurlar! Herhangi bir sorunuz varsa, ana fikre yorum eklemekten çekinmeyin.
starfry

3

Ayrıca bu konunun en üstünde açıklanan bir markdown editörü arıyorum

"Markdown araçlarını" gördünüz mü: http://md-wysiwyg.sourceforge.net/

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

Bu, aradığımıza oldukça yakın görünüyor, WYSIWYG zengin metninizi almak ve fiyat düşürmek için makul bir iş çıkarıyor. Ancak, bir google dokümanından bazı zengin metinler yapıştırdığımda bir kodlama istisnasında başarısız oldu.


Bunun kaynak kodu, HTML'yi markdown değil gösterir.
kodlayıcı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.