Googlede arasanız dahi bu kadar çeşitli WYSIWYG editör bulabileceğinize pek ihtimal vermiyorum. O kadar çok çeşit WYSIWYG editör var ki bu listede, bazı editörlerin özelliklerine baktığınızda var olduklarına bile inanamayacaksınız. Evet gerçekten baktığınızda böyle birşey olabilir mi diye oturup inceleyeceğiniz editör örnekleri var bu listede. Bu listedeki WYSIWYG editör örneklerinin çoğunu kendim masaüstünde test ettim ve en çok dikkatimi çeken örneklerden bir tanesi, editör içinde websayfası tasarlayabileceğiniz bir alan sunuyor. Tabi kendi başına tasarlayıp kaydetmiyor, bunu kendi projenize uyarlamanız gerek. Hangi editörde bu özelliğin olduğunu söylemeyeceğim,  listede en altlarda olan bir WYSIWYG editörde var bu özellik ve örnek bir görüntüsü de bu resimde görünüyor.

Websitemi eskiden ziyaret edenler bilirler görüntüsünü. Kaç gündür yeni tasarım ve yeni özellikler üzerinde uğraşırken WYSIWYG editör ihtiyacım olduğu için bende kendi ihtiyaçlarıma uygun bir örnek aramaya çalıştım. Sonuç olarak onlarca editör birikti listede. Herhangi biribini kullandın mı diye soracaksanız da cevap olarak hiçbirini kullanmadım diyeceğim 😀 Çünkü ben Css ve javascript tarafında mümkün olduğu kadar az kodlama kullanarak bu sayfayı tasarladım. 50kb olan bir css dosyasında bile çoğu görünümden feragat edip 6-7kb a kadar düşürdüm. Bu listedeki bazı editörlerdeki bütün özellikleri kullanabilmeniz için birkaç mblik js ve css dosyasını kullanmanız gerekiyor.

Hani kendi  ihtiyaçlarıma uygun bir tane editör çıkmadı mı bu listede? Tabi ki çıktı ancak çıkanlar da textarea desteklemediğinden ve çok uğraştıracağından kullanmaktan vazgeçtim.  Altı üstü istediğim şey bir kaç butondan oluşan bir editör. Giphy sitesinden gifleri çekebilecek bir buton, B ile kalın harfler oluşturma ve listeler şeklinde 3 adet düğme yeterdi bana. Trumbowyg bu ihtiyaçlarımı karşılasa da bazı özellikleri kullanmak için ekstra css ve js dosyaları kullanmak  kabul edemeyeceğim bir boyuttu.

Bu sitede üye girişi yaparsanız eğer üstteki profil fotoğrafınızın yanındaki ikonlarda kağıt uçak ikonunu göreceksiniz. O ikona tıkladığınızda Soru sorabileceğiniz bir alan çıkıyor. Düz textarea etiketinden oluşuyor. Sırf onun için editör arayışındaydım ama bu kadar basit ve bu sitenin  her sayfasında görünecek olan bir dosya yüklemesi benim için kabul edilemezdi. Çünkü çok takıntı haline getirdim bu sitedeki dosya boyutlarını. Şöyle ki üye girişi yapmadığınız taktirde çoğu javascript ve css  çalışmıyor. Gece gündüz modu bile normal ziyaretçiler için devre dışı bırakılmış. Ayrıca giriş yaptığınızda da görebileceğiniz tek bir reklam var o da sayfalar arası geçişlerde çıkan  tam ekran bir reklam. Ajax ile çekmeyi de denedim sırf o dosyalar sadece gerekli olduğu zaman devreye girsin diye. Gel gör ki ajax ile soru sorma formunu çektiğimde WYSIWYG editörlerin hiçbiri çalışmadı. Ajax kullanmadan, tıklandığında yeni bir sayfada sadece editör kullanma fikrine de şimdilik yanaşmıyorum. Bir yolu mutlaka vardır bunu yapabilmek için, şimdilik bir çözüm bulamadığımdan dolayı o şekilde bıraktım.

Bu konuda bana hak verecek olanlarınız da olacaktır mutlaka. Düşünsenize binlerce kişi websitenizi ziyaret ediyor ve binde bir kişinin tıklayacağı bir yer için herkese  o dosyaları yükletmek zorunda kalıyorsunuz.  Yani bence haksız da değilim bu durumu kabul etmeme konusunda.  Her ne kadar bu editörlerin avantajları olsa da  boyutları benim için dezavantajdı. Bu arada Gönderi oluşturma sayfasında Tinymce editör kullanıyorum. Soru sorma sayfası için henüz ne tür bir editör kullanacağım konusunda karar vermiş değilim.

Bu listede olan editörler bir nevi WYSIWYG editörleri nelerdir ve WYSIWYG ne işe yarar sorusunun cevabını veriyor. Bilmeyeneler için kısaca üstünden geçmek gerekirse  Bir div yada bir textareayı Html editöre dönüştürüyor.  Bu listedeki bazı editörler birbirlerinin kopyası gibi ancak temelde hepsinin farklılıkları mevcut.

Not: linklerin hepsi yeni sekmede açılır

Diğer kütüphanelere veya çerçevelere bağımlı olmadan kullanılabilen WYSIWYG Düzenleyicileri.

1. Adiptal Editor – Ücretsiz veya  Ücret ile Yükseltilebilir – Adiptal Düzenleyici, JavaScript üzerine oluşturulmuş iframe tabanlı bir WYSIWYG düzenleyicidir. Gelişmiş özellikler ve özel öğelerle, duyarlı sayfalar tasarlamak için temiz çıktılar sağlar.
2. Aloha Editor – Aloha Editor bir JavaScript içerik düzenleme kütüphanesidir.
3. CKEditor 4 – Zorlu testlerden geçmiş WYSIWYG HTML düzenleyicisi.
4. CKEditor 5 – Güçlü bir çerçeveyle oluşturulmuş, kullanıma hazır zengin metin düzenleyicileri seti.
5. Content Tools – HTML içeriği için WYSIWYG düzenleyicileri oluşturmaya yönelik bir JS kitaplığı.
6. Editor.js – Temiz JSON çıktısına sahip blok tarzı bir düzenleyici.
7. Etherpad – Etherpad: Gerçekten gerçek zamanlı işbirliğine dayalı belge düzenleme.
8. Froala Editor  Ücretli –  Tescilli – HTML5’i temel alan, güzel tasarlanmış bir WYSIWYG Zengin Metin Düzenleyicisi.
9. grande.js – Medium’a benzer içerik oluşturma/düzenleme deneyimi sağlayan basit bir WYSIWYG düzenleyicisidir.
10. Jodit – Zengin HTML WYSIWYG Düzenleyicisi ve Dosya Tarayıcı.
11. Medium Editor – Medium.com WYSIWYG düzenleyici çakması. Zengin metin çözümünü uygulamak için içeriği düzenlenebilir API’yi kullanır.
12. Medium.js – Düzenlenebilir içeriği güzelleştirmek için küçük bir JavaScript kitaplığı (Medium’un editörü gibi).
13. Milkdown – Eklenti odaklı WYSIWYG işaretleme düzenleyici çerçevesi.
14. Mobiledoc Kit – Mobiledoc ile WYSIWYG editörleri oluşturmaya yönelik bir araç seti.
15. Pell – Hiçbir bağımlılığı olmayan, web için en basit ve en küçük (1kB) WYSIWYG metin düzenleyicisi.
16. Pen Editor – Canlı düzenlemenin (+markdown) keyfini çıkarın.
17. Quill – Uyumluluk ve genişletilebilirlik için tasarlanmış modern bir zengin metin düzenleyici. Bunun üzerine çok kafa yormuştum kullanmak için.  Basitlik açısından favorilerimden biriydi
18. SCEditor -Hafif bir WYSIWYG BBCode ve XHTML düzenleyicisi.
19. Scribe – Kullanımdan kaldırıldı Tarayıcı tutarsızlıkları ve makul varsayılanlar için yamalar içeren, web platformu için zengin bir metin düzenleyici çerçevesi.
20. Squire – Son derece hafif ve esnek olmasının yanı sıra güçlü tarayıcılar arası normalleştirme sağlayan bir HTML5 zengin metin düzenleyicisidir.
21. Substance – Web tabanlı içerik düzenlemeye yönelik bir JavaScript kitaplığı.
22. SunEditor – Hiçbir bağımlılığı olmayan, saf javascript tabanlı WYSIWYG html editörü.
23. TinyMCE – Platformdan bağımsız ‘WYSIWYG’ veya zengin metin düzenlemeye yönelik bir JavaScript kitaplığı.
24. tiptap – Web sanatçıları için kılçıksız editör çerçevesi.
25. Trix – Günlük yazılar için zengin bir metin editörü.
26. Tui Editor – Markdown WYSIWYG Editörü. GFM Standardı + Grafik ve UML Genişletilebilir.
27. UEditor – UEditor, Baidu fex ekibi tarafından geliştirilen bir WYSIWYG zengin web editörüdür. Hafiftir, özelleştirilebilir ve kullanıcı odaklıdır.
28. wangEditor – Hafif, zengin bir metin editörü, API ve kullanımı son derece kullanışlı.
29. wysihtml – Modern web için açık kaynaklı zengin metin düzenleyicisi.
30. on CodeMerge – Modüler, açık kaynaklı, zengin metin düzenleyicisi.

jQuery Tabanlı

jQuery olmadan kullanamayacağınız editörler

1. bootstrap-wysiwyg – Küçük önyükleme uyumlu WYSIWYG zengin metin düzenleyicisi.
2. Dante Editor – Başka bir Medium wysiwyg düzenleyici çakması.
3. Easyeditor – Çok hafif ve son derece yapılandırılabilir zengin metin html editörü.
4. jQuery-Notebook – Modern, basit ve zarif bir WYSIWYG zengin metin düzenleyicisi.
5. popline – Bir HTML5 Zengin Metin Düzenleyici Araç Çubuğu.
6. simditor – Kolay ve Hızlı bir WYSIWYG Editörü.
7. Summernote – Süper basit WYSIWYG editörü.
8. Toast UI Editor – Markdown WYSIWYG Düzenleyici – Üretken ve Genişletilebilir.
9. Trumbowyg – Hafif ve muhteşem bir WYSIWYG JavaScript editörü – yalnızca 20kB (8kB gzip).

Angular için

Angular tabanlı projeniz için editörler.

1. angular-froala-wysiwyg Angular 4’ten Angular 9’a kadar olan sürümler için bağlantıların (bindings) ücretli. Froala WYSIWYG Editörü’nü Angular 4’ten başlayarak Angular 9’a kadar olan sürümlerle entegre etmek için kullanılan bağlantılar için bir ücret talep ediliyor.
2. ckeditor4-angular – Angular 2+ için resmi bir CKEditor 4 zengin metin düzenleyici bileşeni.
3. ckeditor5-angular – Angular 2+ için resmi bir CKEditor 5 zengin metin düzenleyici bileşeni.
4. ngx-summernote – Angular için Summernote wysiwyg editörü.
5. jodit-angular – Angular içinde Jodit’in kullanımını kolaylaştırmak için geliştirilmiş bir bileşen.
6. ngx-quill – Angular (2 ve üstü sürümler için) için tasarlanmış bir bileşen
7. textAngular – Angular.js için oldukça güçlü bir metin düzenleyici/WYSIWYG editörü
8. tinymce-angular – TinyMCE için resmi olarak Angular’da kullanılmak üzere geliştirilmiş bir sarmalayıcı (wrapper) bileşeni
9. ngx-wig – Angular.js’den ilham alınarak geliştirilmiş bir WYSIWYG HTML Zengin Metin Düzenleyicisi (ngWig)
10. ngx-editor – ProseMirror kullanılarak Angular için geliştirilmiş bir Zengin Metin Düzenleyicisi

Tepki/Reaksiyonlar/Emojiler

React tabanlı projeniz için editörler.

1. Alloy Editor – Tamamen yeniden yazılmış kullanıcı arayüzüne sahip CKEditor tabanlı WYSIWYG editörü.
2. bangle.dev – Zengin metin editörleri oluşturmaya yönelik daha yüksek düzeyde ProseMirror bileşenleri koleksiyonu.
3. ckeditor4-react – React için resmi bir CKEditor 4 zengin metin düzenleyici bileşeni.
4. ckeditor5-react – React için resmi bir CKEditor 5 zengin metin düzenleyici bileşeni.
5. Dante II – Dante editörünün draft-js’de tamamen yeniden yazılış versiyonu
6. Draft.js – React için oluşturulmuş ve değişmez bir modelle desteklenen bir JavaScript zengin metin düzenleyici çerçevesi.
7. jodit-react – Jodit Editor için React bileşeni.
8. lexical– Meta tarafından sunulan Draft.js’nin halefi olan genişletilebilir bir metin düzenleyici çerçevesi.
9. Plasmic – React bileşenlerini sürükleyip bırakmanıza olanak tanıyan bir WYSIWYG görsel oluşturucu.
10. React Draft Wysiwyg – React ve DraftJS üzerine kurulu bir Wysiwyg editörü.
11. react-froala-wysiwyg Ücretli – Froala WYSIWYG HTML Zengin Metin Düzenleyicisi için React bileşeni.
12. react-mobiledoc-editor – React ve Mobiledoc-Kit ile yazılmış bir Mobiledoc editörü.
13. react-quill – React için bir Quill bileşeni.
14. react-rte – Draft.js tabanlı Pure React zengin metin “WYSISYG” düzenleyicisi
15. react-summernote – React için Summernote (Süper basit WYSIWYG editörü) uyarlaması.
16. react-trix – Basecamp’ın Trix editörü için reaksiyon paketi.
17. Slate JS – Tamamen özelleştirilebilir bir framework.
18. suneditor-react – SunEditor için Pure React Bileşeni (Bağımlılığı olmayan, saf javascript tabanlı WYSIWYG html editörü).
19. tinymce-react – TinyMCE için resmi React sarmalayıcısı.

Vue için

Vue tabanlı projeniz için editörler.

1. ckeditor4-vue – Vue için resmi bir CKEditor 4 zengin metin düzenleyici bileşeni.
2. ckeditor5-vue – Vue için resmi bir CKEditor 5 zengin metin düzenleyici bileşeni.
3. vue-froala-wysiwyg Ücretli – Froala WYSIWYG HTML Zengin Metin Düzenleyicisi için Vue bileşeni.
4. vue-html5-editor – Vue için bir html5 wysiwyg editörü.
5. vue-mobiledoc-editor – Vue için bir mobiledoc düzenleyici bileşen araç seti.
6. vue-wysiwyg – Vue için hafif bir WYSIWYG editörü.
7. vue-ckeditor5 – Vue için CKEditor 5.
8. Vue2Editor – Vue ve Quill kullanan bir metin editörü.
9. tinymce-vue – Vue için resmi TinyMCE sarmalayıcısı.
10. vue-trix – Vue için basit ve hafif Trix düzenleyici bileşeni.
11. Everright-formEditor – Vue3’ü temel alan görsel, düşük kodlu bir form düzenleyici. GUI arayüzü üzerinden basit işlemlerle formlar oluşturabilir. Esnek bir etkileşime sahiptir. PC element-plus’a, mobil ise vant’a bağlı. Parametreleri hem element-plus hem de vant tarafından tanınabilecek parametrelere dönüştürmek için bir dizi  bağlantıya sahip.

Ruby için

Ruby tabanlı projeleriniz için editörler.

1. bootstrap-wysihtml5-rails – Bootstrap için WYSIWYG editörü, Ruby on Rails varlık hattına entegre edilmiştir.
2. bootsy – Rails için resim yükleme özelliğine sahip güzel bir wysiwyg editörü.
3. ckeditor – Raylar için Ckeditor entegrasyon cevheri.
4. Mercury Editor – Mercury Editörü: Rails HTML5 WYSIWYG editörü.
5. wysiwyg-rails – Ücretli – Froala jQuery WYSIWYG HTML Zengin Metin Düzenleyici için Ruby cevheri.

WYSIWYG-Emoji

WYSIWYG-emoji editörleri

1. EmojiOne Area – JQuery için WYSIWYG EmojiOne benzeri Dönüştürücü / Seçici Eklentisi.
2. GrapesJS – Açık kaynaklı, çok amaçlı bir Web Builder Çerçevesi.
3. last-draft – Draft.js eklentilerini kullanan bir Draft.js düzenleyicisi.
4. Ory editor – Bu editör, kullanıcıların içerik düzenlemesi için gelişmiş ve güçlendirilmiş bir arayüz sunar.
5. prosemirror –  ProseMirror WYSIWYM editörü.
6. rich-textarea – React’in metinleri renklendirmesi, vurgulaması, süslemesi ve otomatik tamamlama sunması için bir textarea bileşeni.
7. Sir Trevor – Zengin içerik düzenleme tamamen web için yeniden tasarlandı.
8. woofmark – Modüler, ilerici ve güzel bir Markdown ve HTML editörü.
9. ngx-wall – Süslü sürükle ve bırak deneyimine sahip genişletilebilir bileşen tabanlı düzenleyici.