2025’te Hangi Zengin Metin Düzenleyici Framework’ü Seçmelisiniz?

xguru · 2025-02-10T10:21:01+09:00

Günümüzde uygulamalar için vazgeçilmez olan zengin metin düzenleyicileri (WYSIWYG), Linear, Notion ve Google Docs gibi servislerde yaygın olarak kullanılıyor Liveblocks, son bir yılda çeşitli popüler editörleri analiz ederek her birinin güçlü ve zayıf yönlerini derledi Editörler genel olarak ikiye ayrılıyor: "çekirdek odaklı" ve "özellikleri içinde gelen" (battery-included) Yalnızca basit bir editöre ihtiyacınız varsa hafif bir seçeneği, karmaşık ve yoğun işbirliği özelliklerine sahip bir editör geliştirecekseniz yüksek ölçüde genişletilebilir bir yapıyı değerlendirmelisiniz Genel olarak en risksiz tercih Tiptap olarak görülüyor; çünkü zengin özellikler sunarken aşırı derecede dayatmacı olmayan dengeli bir yapıya sahip olduğu değerlendiriliyor İşbirliği Biz (Liveblocks), işbirliği özelliklerine odaklandık ve çoğu editörde Yjs adlı CRDT kütüphanesi aracılığıyla gerçek zamanlı işbirliği uygulanabiliyor Yjs kullanırken belgeleri depolayacak ve gerçek zamanlı bağlantıyı sürdürecek bir backend hizmetine ihtiyaç duyuluyor Liveblocks, Yjs destekleyen çeşitli editörlerde kullanılabilen genel amaçlı bir Yjs backend’i sunuyor; ayrıca Tiptap ve Lexical için entegre çözümler de sağlıyor Bazı editörler ise kendi OT (Operational Transform) tabanlı çözümlerini veya kapalı kaynak bulut hizmetlerini kullanıyor Başlamadan önce dikkat edilmesi gerekenler Draft.js gibi bakımı sona ermiş editörler, küçük topluluklara sahip editörler veya private source editörler (Froala vb.) kapsam dışı bırakıldı Erişilebilirlik (a11y) çoğu editörde belli ölçüde ek çalışma gerektiriyor; bu nedenle her editörün dokümantasyonuna bakmak gerekiyor Tiptap ProseMirror üzerinde çalışan bir editör; ProseMirror’ın karmaşıklığını soyutlayarak geliştirme deneyimini iyileştiriyor Büyük ölçüde MIT lisansı ile sunuluyor ve Tiptap Cloud ya da Liveblocks üzerinden gerçek zamanlı işbirliği özellikleri doğrudan kullanılabiliyor Çok sayıda özellik sunmasına rağmen tree-shaking uygulanabilen bir yapıda tasarlandığı için çekirdek bundle boyutu Quill, Slate ve Lexical’dan daha küçük tutulabiliyor Genişletme Tiptap, basit node, mark, command ve extension eklemeyi kolaylaştıracak şekilde tasarlandı Gerektiğinde mevcut extension’ların davranışı override edilerek istenildiği gibi özelleştirilebiliyor Bazı “pro” extension özellikleri ücretli olarak sunuluyor İleri düzey özelleştirme ProseMirror yapısını doğrudan ele alma ihtiyacı doğabiliyor Command chain gibi Tiptap’e özgü soyutlamalara alışmak biraz zaman alabiliyor Veri modeli schema tabanlıdır; çoğu durumda otomatik oluşturulsa da ileri düzey özelliklerde schema ile doğrudan çalışmak gerekebiliyor Sınırlamalar (Drawbacks) Hem ProseMirror hem de Tiptap dokümantasyonuna dönüşümlü bakmak gerektiğinden yönergeler kafa karıştırıcı olabiliyor Erişilebilirlik (a11y) ile ilgili konular büyük ölçüde implementasyonu yapan kişiye bırakılıyor Transaction sırasında belge durumunu gereksiz yere dolaşmak performans düşüşüne yol açabiliyor Sunucu tarafı değişiklikleri Tiptap tek başına kullanıldığında sunucu tarafında belgeyi manipüle etmek kolay değil Bunun için ProseMirror’ı doğrudan kullanmak ya da JSON belgeyi doğrudan düzenlemek değerlendirilmeli Liveblocks, ProseMirror belgelerini değiştirmeyi daha kolay hale getiren bir kütüphane sunuyor Gerçek zamanlı işbirliği Tiptap, Yjs ile gerçek zamanlı işbirliği sağlayan extension’lara sahip Tiptap Cloud, Liveblocks ve diğer çeşitli bulut çözümleriyle entegre olabiliyor Liveblocks Text Editor, gerçek zamanlı işbirliğine ek olarak imleç gösterimi, yorumlar, mention’lar ve sürüm geçmişi gibi çeşitli özellikler de sunuyor Artılar (Pros) Güçlü dokümantasyon desteği Üst düzey gerçek zamanlı işbirliği özellikleri Framework bağımsız yapı ve React’e özel paketler Yüksek genişletilebilirlik Liveblocks veya Tiptap Cloud ile entegrasyon imkanı Eksiler (Cons) En iyi kullanım yöntemleri izlenmezse performans düşüşü yaşanabilir İleri düzey özellikler geliştirmek için ProseMirror’ın iç yapısını öğrenmek gerekir Varsayılan olarak sunucu tarafında headless düzenleme desteği zayıf BlockNote BlockNote, Tiptap ve ProseMirror’ı genişleten blok tabanlı bir editördür ve Notion tarzı özellikler sunar Büyük ölçüde React odaklı geliştirildiği için diğer framework’lerde UI bileşenlerinden yararlanmak zordur Slash menü, floating toolbar gibi gerekli özellikler zaten dahil olduğundan kolayca kullanılabilir Sınırlamalar BlockNote’un kendisi açık kaynak olsa da docx ve PDF exporter gibi bazı özellikler ücretli abonelik gerektirir Gerçek zamanlı işbirliği Yjs ve Liveblocks tabanlı işbirliği özelliklerini destekler Yakında resmi Liveblocks entegrasyonu sunulacaktır Artılar Güvenilirliği kanıtlanmış Tiptap ve ProseMirror temeli Yjs ve Liveblocks ile gerçek zamanlı işbirliği desteği Blok tabanlı düzenleme API’si ve UI bileşenleri varsayılan olarak sunulur Eksiler Ağırlıklı olarak yalnızca React için tasarlanmıştır Temel editörlere kıyasla bundle boyutu daha büyüktür Lexical Facebook (Meta) tarafından desteklenen bu editör büyük ilgi görüyor Liveblocks’un aylar boyunca yorumlar, mention’lar, sürüm geçmişi ve gerçek zamanlı işbirliği gibi extension’lar geliştirmesi sonucunda, ürünün hâlâ erken aşamada olduğu izlenimi edinildi Şu anda 1.0 altı sürümlerde ve hızlı biçimde güncellenmeye devam ediyor Sınırlamalar “Pure decorations” özelliği olmadığı için imleç gösterimi gibi işlevleri uygulamak adına editörün üzerine ayrı DOM öğeleri bindirmek gerekiyor Temel Yjs işbirliği desteği henüz edge case’leri ele almada zayıf Root node adının hardcode edilmiş olması nedeniyle aynı belge içinde birden fazla editörü eşzamanlı kullanmak zorlaşıyor Gerçek zamanlı işbirliği Liveblocks paketi kullanılmadığı sürece Lexical ile işbirliği uygulamak zordur StickyNotes örneğinde olduğu gibi birden fazla root node oluşturulurken her biri için ayrı belge ve socket bağlantısı kullanılarak geçici çözüm uygulanır Hızlı geliştirme temposu sayesinde sorunlar düzenli olarak çözülüyor Lexical genişletme Lexical, verileri node hiyerarşisi üzerinden yönetir Dört çekirdek node türünü miras alarak özel node’lar oluşturulabilir React’e özel LexicalComposer ve @lexical/react paketleriyle geliştirme hızı artırılabilir Backend’de DOM olmadan Lexical çalıştırmak için @lexical/headless paketi kullanılabilir Sunucu tarafı değişiklikleri Lexical belgelerini sunucuda değiştirmek mümkündür ve Liveblocks bunu basitleştiren bir kütüphane sunar Artılar Yjs ile gerçek zamanlı işbirliği desteği Framework bağımsız yapı ve React’e özel paketler Yorumlar, mention’lar ve sürüm geçmişiyle entegre Liveblocks desteği Meta desteği, çok aktif geliştirme süreci ve büyük topluluk Eksiler Yjs tabanlı gerçek zamanlı işbirliğinde edge case’ler doğrudan ele alınmazsa küçük hatalar görülebilir Pure decorations desteği eksiktir ve ileri düzey özellikler için DOM tabanlı geçici çözümler gerekir Çekirdek paket boyutu Tiptap ve Slate’e kıyasla daha büyüktür Slate Discord, Grafana, Sanity.io, Slite gibi platformlarda kullanılan, özelleştirilebilir bir editör framework’ü Liveblocks, kendi yorum oluşturucusunda varsayılan olarak Slate’i benimsiyor Veri yapısı basittir, tam kontrol sunar ve React dışında da genel amaçlı kullanılabilir Slate’i genişletme Slate, çeşitli örnekler ve dokümantasyon aracılığıyla genişletilebilir Plugin ekosistemi sınırlı olsa da doğrudan uygulamak çok zor değildir Daha genişletilmiş bir yapı olarak Plate adlı bir proje bulunur Sınırlamalar Tiptap’e göre biraz daha büyük bir bundle boyutuna sahiptir Yerleşik özellikleri az olduğu için bazı kısımları doğrudan sizin geliştirmeniz gerekir Gerçek zamanlı iş birliği slate-yjs, @liveblocks/yjs gibi araçlarla Slate belgelerinde gerçek zamanlı iş birliği uygulanabilir Artıları Güçlü dokümantasyon desteği Yjs ile gerçek zamanlı iş birliği desteği Framework bağımsızdır ve React’e özel paketler sunar Yüksek genişletilebilirlik Eksileri Tiptap’e kıyasla biraz daha büyük bundle boyutu Yerleşik özelliklerin yetersizliği Quill Slack, LinkedIn, Figma, Zoom, Miro, Airtable gibi ürünlerde kullanılmış bir geçmişe sahip editör Bir süre geliştirme yavaşlamıştı, ancak Nisan 2024’te sürüm 2’nin yayımlanması ve TypeScript ile yeniden yazılmasıyla yeniden hareket kazandı Parchment adlı kendine özgü bir belge modeli kullanır; bu, ProseMirror şemasına benzer bir kavramdır Sınırlamalar Lexical’daki gibi saf decoration özelliği yoktur; bu yüzden renkli vurgulama veya iş birliği imleci gibi özellikler için ayrı DOM öğeleri bindirmek gerekir Quill 2 için plugin’ler çoğu zaman hâlâ güncellenmemiş durumda Topluluk etkinliği diğer editörlere kıyasla biraz daha düşük olabilir Gerçek zamanlı iş birliği Yjs ve y-quill birleştirilerek gerçek zamanlı iş birliği uygulanabilir Ayrı backend olarak Liveblocks gibi farklı yöntemler kullanılabilir Artıları Güçlü dokümantasyon desteği Framework bağımsızdır ve React’e özel paketler sunar Yjs ile gerçek zamanlı iş birliği desteği Basit delta formatı kullanır Eksileri Yerleşik özellikler yetersizdir ve plugin’ler henüz Quill 2’ye uyumlu olacak şekilde güncellenmemiştir Saf decoration özelliği eksik Görece daha yavaş geliştirme ve daha küçük topluluk Tiptap veya Slate’e göre iki kat daha büyük bundle boyutu ProseMirror Tiptap, Remirror, BlockNote gibi birçok editörün temelini oluşturan çekirdek framework Şema, state, view, transform gibi net bir yapı sayesinde kararlı çalışma sunar Sıfırdan yalnızca çekirdek kütüphane ile bir editör kurmak isterseniz kod miktarı oldukça artma eğilimindedir Sınırlamalar Basit bir editör oluşturmak için bile oldukça fazla kod gerektiği dokümantasyonda açıkça belirtilmiştir Tiptap, Remirror, BlockNote gibi daha üst seviye wrapper’ların kullanılması tavsiye edilir Öğrenme eğrisi nispeten yüksektir, ancak dokümantasyon ve topluluk iyi oturmuştur Artıları Aktif toplulukla birlikte güçlü dokümantasyon sunar Yjs ile gerçek zamanlı iş birliği desteği Eksileri Temel örnekleri bile uygulamak için çok fazla kod gerekir Yerleşik özelliklerin yetersizliği Görece dik öğrenme eğrisi Plate Slate tabanlı, yapay zeka özellikleri, mention ve yorum gibi zengin plugin’ler sunan “her şey dahil” bir proje Yalnızca ihtiyaç duyulan özellikleri seçerek kullanabildiğiniz için esnektir Ücretli şablonlar da sunar ve React’e özel tasarlanmıştır Sınırlamalar İş birliği şu anda resmî olarak yalnızca Hocuspocus’u destekler; diğer Yjs backend’lerine (ör. Liveblocks) bağlamak için ek geliştirme gerekir React’e özel olduğu için diğer framework’lerle uyumluluk sınırlı olabilir Özellik sayısı fazla olduğundan bundle boyutu büyüme eğilimindedir Artıları Çeşitli plugin kütüphaneleri sunar Sunucu tarafı düzenleme özelliklerini destekler Hızlı başlangıç sağlayan şablonlar sunar Eksileri React’e özel tasarlanmıştır İş birliği özelliği yalnızca Hocuspocus üzerinden kullanılabilir Temel editörlere kıyasla daha büyük bundle boyutu Remirror ProseMirror tabanlı bir editör; Tiptap’e benzer, ancak daha fazla “her şey dahil” yaklaşımını benimser 30’dan fazla plugin, React hook’ları, uluslararasılaştırma (i18n), erişilebilirlik (a11y) gibi özellikleri destekler MIT lisanslı açık kaynaklıdır ve iş birliği özelliği de sunar Sınırlamalar Tiptap’e kıyasla topluluğu daha küçüktür ve güncellemeler daha yavaş olabilir React’e özel özelliklerin fazla olması, diğer ortamlarda kısıt yaratabilir Bundle boyutu nispeten büyüktür Gerçek zamanlı iş birliği Remirror, YjsExtension aracılığıyla Yjs ve Liveblocks ile iş birliğini destekler Artıları Güçlü dokümantasyon desteği Çeşitli plugin kütüphaneleri sunar Yjs ve Liveblocks ile iş birliği desteği Eksileri React’e özel tasarlanmıştır Daha büyük bundle boyutu Düşük güncelleme sıklığı ve küçük topluluk Editor.js Blok tabanlı düzenlemeyi destekleyen bir zengin metin editörü; çeşitli plugin’lere ve büyük bir topluluğa sahiptir Blok, inline ve tune’dan oluşan bir veri yapısı kullanır Framework bağımsızdır ve tooltip gibi çeşitli kullanım kolaylığı özelliklerini yerleşik olarak sunar Sınırlamalar Gerçek zamanlı iş birliği resmî olarak desteklenmez; denenmiş bazı PR’lar olsa da bakım durumları belirsizdir Yalnızca temel paketle bile boyutu oldukça büyüktür Gerçek zamanlı iş birliği Resmî olarak desteklenmez Artıları Çeşitli özelliklere sahip zengin plugin kütüphaneleri sunar Farklı CMS’ler ve backend framework’leriyle topluluk tabanlı entegrasyon desteği Eksileri Daha büyük bundle boyutu Gerçek zamanlı iş birliği özelliğinin olmaması CKEditor 20 yılı aşkın geçmişe sahip bir editör; güncel sürümü (5), modern yapı ve zengin özellikler sunar Angular, React, Vue, Next gibi farklı framework’leri destekler GPL-2 lisansıyla dağıtılır; bazı durumlarda açık kaynak olmayı gerektirir ve ticari kullanım için ayrı lisans satın alınması gerekir Sınırlamalar Plugin’lerin önemli bir kısmı ücretlidir ve iş birliği özelliği de yalnızca CKEditor’un bulut hizmeti üzerinden kullanılabilir GPL-2 lisansı ve yükleme sayısına dayalı ücretlendirme modeli birçok kullanıcı için engel olabilir Gerçek zamanlı iş birliği CKEditor’un kapalı bulut hizmeti dışında başka bir iş birliği çözümü sunulmaz Artıları Varsayılan olarak çok zengin özellikler sunar Çeşitli framework’lerle uyumludur Eksileri İş birliği özelliği CKEditor’un bulut hizmetine bağımlıdır GPL-2 lisansı bazı kullanıcılar için kısıtlayıcı olabilir Bazı özellikler kullanım bazlı ücretlendirmeyle sunulur TinyMCE CKEditor gibi 20 yılı aşkın geçmişe sahip bir editördür ve GPL-2 lisansını kullanır Angular, React, Vue gibi çeşitli ortamlarda kullanılabilir Yükleme sayısına dayalı ücretlendirme modeline sahip bir bulut iş birliği hizmeti bulunur Sınırlamalar Markdown, mention, yorumlar, gelişmiş tipografi gibi temel özellikler ücretli plugin’ler olarak sunulur Belgeleri sunucu tarafında nasıl işleyeceğine dair dokümantasyon yetersizdir Gerçek zamanlı iş birliği TinyMCE’nin kapalı iş birliği çözümü dışında başka bir yöntem kamuya açık değildir Artıları Varsayılan olarak çok zengin özellikler sunar Çeşitli framework’lerle uyumludur Eksileri İş birliği özelliği Tiny Cloud hizmetine bağımlıdır GPL-2 lisansı bazı kullanıcılar için kısıtlayıcı olabilir Bazı özellikler kullanım bazlı ücretlendirmeyle sunulur Editör karşılaştırma özeti ProseMirror Framework: Vanilla Collaboration: Yjs Comments: Sunmaz (örnek mevcut) Mentions: Suggestion eklentisi kullanılabilir Server-side editing: prosemirror-state ve prosemirror-model ile belgeler Node.js üzerinde düzenlenebilir License: MIT GitHub Stars: ⭐ 7.8k Tiptap Framework: Vanilla, React, Vue, Svelte Collaboration: Liveblocks, Tiptap Cloud, Yjs Comments: Liveblocks entegrasyonu ile yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir Mentions: Liveblocks entegrasyonu ile yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün License: MIT GitHub Stars: ⭐ 20k Remirror Framework: React Collaboration: Yjs Comments: Mümkün Mentions: Mümkün Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün License: MIT GitHub Stars: ⭐ 2.8k BlockNote Framework: React Collaboration: Yjs Comments: Liveblocks veya özel örnekler üzerinden mümkün Mentions: Mümkün Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün License: MPL 2 GitHub Stars: ⭐ 7.1k Lexical Framework: Vanilla, React, iOS, diğerleri Collaboration: Liveblocks, Yjs Comments: Liveblocks ile entegre edildiğinde yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir Mentions: Liveblocks ile entegre edildiğinde yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir Server-side editing: Lexical veya Liveblocks'un Node.js Lexical paketi üzerinden mümkün License: MIT GitHub Stars: ⭐ 20k Slate Framework: Vanilla, React Collaboration: Yjs Comments: Sunmaz (örnek mevcut) Mentions: Örnek mevcut Server-side editing: Sunmaz License: MIT GitHub Stars: ⭐ 30k Plate Framework: Yalnızca React Collaboration: Hocuspocus (Yjs) Comments: Mümkün Mentions: Mümkün Server-side editing: Mümkün License: MIT GitHub Stars: ⭐ 13k Quill Framework: Vanilla Collaboration: Yjs Comments: Sunmaz (örnek mevcut) Mentions: Üçüncü taraf kütüphaneler kullanılabilir Server-side editing: Sunmaz License: BSD-3 GitHub Stars: ⭐ 45k Editor.js Framework: Vanilla Collaboration: Desteklemez (üçüncü taraf örnekler mevcut) Comments: Sunmaz (üçüncü taraf kütüphaneler mevcut) Mentions: Sunmaz (örnek mevcut) Server-side editing: Sunmaz License: Apache 2 GitHub Stars: ⭐ 28k CKEditor Framework: Vanilla, React, Vue, Angular Collaboration: CKEditor Cloud ile entegre Comments: Mümkün Mentions: Mümkün Server-side editing: Mümkün License: GPL-2+ GitHub Stars: ⭐ 8.8k TinyMCE Framework: Vanilla, React, Vue, Angular, diğerleri Collaboration: Tiny Cloud ile entegre Comments: Tiny Cloud ile entegre Mentions: Mümkün Server-side editing: Sunmaz License: GPL-2+ GitHub Stars: ⭐ 15k

(liveblocks.io)

65 puan yazan xguru 2025-02-10 | 14 yorum | WhatsApp'ta paylaş

Günümüzde uygulamalar için vazgeçilmez olan zengin metin düzenleyicileri (WYSIWYG), Linear, Notion ve Google Docs gibi servislerde yaygın olarak kullanılıyor
Liveblocks, son bir yılda çeşitli popüler editörleri analiz ederek her birinin güçlü ve zayıf yönlerini derledi
Editörler genel olarak ikiye ayrılıyor: "çekirdek odaklı" ve "özellikleri içinde gelen" (battery-included)
Yalnızca basit bir editöre ihtiyacınız varsa hafif bir seçeneği, karmaşık ve yoğun işbirliği özelliklerine sahip bir editör geliştirecekseniz yüksek ölçüde genişletilebilir bir yapıyı değerlendirmelisiniz
Genel olarak en risksiz tercih Tiptap olarak görülüyor; çünkü zengin özellikler sunarken aşırı derecede dayatmacı olmayan dengeli bir yapıya sahip olduğu değerlendiriliyor
İşbirliği
- Biz (Liveblocks), işbirliği özelliklerine odaklandık ve çoğu editörde Yjs adlı CRDT kütüphanesi aracılığıyla gerçek zamanlı işbirliği uygulanabiliyor
- Yjs kullanırken belgeleri depolayacak ve gerçek zamanlı bağlantıyı sürdürecek bir backend hizmetine ihtiyaç duyuluyor
- Liveblocks, Yjs destekleyen çeşitli editörlerde kullanılabilen genel amaçlı bir Yjs backend’i sunuyor; ayrıca Tiptap ve Lexical için entegre çözümler de sağlıyor
- Bazı editörler ise kendi OT (Operational Transform) tabanlı çözümlerini veya kapalı kaynak bulut hizmetlerini kullanıyor
Başlamadan önce dikkat edilmesi gerekenler
- Draft.js gibi bakımı sona ermiş editörler, küçük topluluklara sahip editörler veya private source editörler (Froala vb.) kapsam dışı bırakıldı
- Erişilebilirlik (a11y) çoğu editörde belli ölçüde ek çalışma gerektiriyor; bu nedenle her editörün dokümantasyonuna bakmak gerekiyor

Tiptap

ProseMirror üzerinde çalışan bir editör; ProseMirror’ın karmaşıklığını soyutlayarak geliştirme deneyimini iyileştiriyor
Büyük ölçüde MIT lisansı ile sunuluyor ve Tiptap Cloud ya da Liveblocks üzerinden gerçek zamanlı işbirliği özellikleri doğrudan kullanılabiliyor
Çok sayıda özellik sunmasına rağmen tree-shaking uygulanabilen bir yapıda tasarlandığı için çekirdek bundle boyutu Quill, Slate ve Lexical’dan daha küçük tutulabiliyor
Genişletme
- Tiptap, basit node, mark, command ve extension eklemeyi kolaylaştıracak şekilde tasarlandı
- Gerektiğinde mevcut extension’ların davranışı override edilerek istenildiği gibi özelleştirilebiliyor
- Bazı “pro” extension özellikleri ücretli olarak sunuluyor
İleri düzey özelleştirme
- ProseMirror yapısını doğrudan ele alma ihtiyacı doğabiliyor
- Command chain gibi Tiptap’e özgü soyutlamalara alışmak biraz zaman alabiliyor
- Veri modeli schema tabanlıdır; çoğu durumda otomatik oluşturulsa da ileri düzey özelliklerde schema ile doğrudan çalışmak gerekebiliyor
Sınırlamalar (Drawbacks)
- Hem ProseMirror hem de Tiptap dokümantasyonuna dönüşümlü bakmak gerektiğinden yönergeler kafa karıştırıcı olabiliyor
- Erişilebilirlik (a11y) ile ilgili konular büyük ölçüde implementasyonu yapan kişiye bırakılıyor
- Transaction sırasında belge durumunu gereksiz yere dolaşmak performans düşüşüne yol açabiliyor
Sunucu tarafı değişiklikleri
- Tiptap tek başına kullanıldığında sunucu tarafında belgeyi manipüle etmek kolay değil
- Bunun için ProseMirror’ı doğrudan kullanmak ya da JSON belgeyi doğrudan düzenlemek değerlendirilmeli
- Liveblocks, ProseMirror belgelerini değiştirmeyi daha kolay hale getiren bir kütüphane sunuyor
Gerçek zamanlı işbirliği
- Tiptap, Yjs ile gerçek zamanlı işbirliği sağlayan extension’lara sahip
- Tiptap Cloud, Liveblocks ve diğer çeşitli bulut çözümleriyle entegre olabiliyor
- Liveblocks Text Editor, gerçek zamanlı işbirliğine ek olarak imleç gösterimi, yorumlar, mention’lar ve sürüm geçmişi gibi çeşitli özellikler de sunuyor
Artılar (Pros)
- Güçlü dokümantasyon desteği
- Üst düzey gerçek zamanlı işbirliği özellikleri
- Framework bağımsız yapı ve React’e özel paketler
- Yüksek genişletilebilirlik
- Liveblocks veya Tiptap Cloud ile entegrasyon imkanı
Eksiler (Cons)
- En iyi kullanım yöntemleri izlenmezse performans düşüşü yaşanabilir
- İleri düzey özellikler geliştirmek için ProseMirror’ın iç yapısını öğrenmek gerekir
- Varsayılan olarak sunucu tarafında headless düzenleme desteği zayıf

BlockNote

BlockNote, Tiptap ve ProseMirror’ı genişleten blok tabanlı bir editördür ve Notion tarzı özellikler sunar
Büyük ölçüde React odaklı geliştirildiği için diğer framework’lerde UI bileşenlerinden yararlanmak zordur
Slash menü, floating toolbar gibi gerekli özellikler zaten dahil olduğundan kolayca kullanılabilir
Sınırlamalar
- BlockNote’un kendisi açık kaynak olsa da docx ve PDF exporter gibi bazı özellikler ücretli abonelik gerektirir
Gerçek zamanlı işbirliği
- Yjs ve Liveblocks tabanlı işbirliği özelliklerini destekler
- Yakında resmi Liveblocks entegrasyonu sunulacaktır
Artılar
- Güvenilirliği kanıtlanmış Tiptap ve ProseMirror temeli
- Yjs ve Liveblocks ile gerçek zamanlı işbirliği desteği
- Blok tabanlı düzenleme API’si ve UI bileşenleri varsayılan olarak sunulur
Eksiler
- Ağırlıklı olarak yalnızca React için tasarlanmıştır
- Temel editörlere kıyasla bundle boyutu daha büyüktür

Lexical

Facebook (Meta) tarafından desteklenen bu editör büyük ilgi görüyor
Liveblocks’un aylar boyunca yorumlar, mention’lar, sürüm geçmişi ve gerçek zamanlı işbirliği gibi extension’lar geliştirmesi sonucunda, ürünün hâlâ erken aşamada olduğu izlenimi edinildi
Şu anda 1.0 altı sürümlerde ve hızlı biçimde güncellenmeye devam ediyor
Sınırlamalar
- “Pure decorations” özelliği olmadığı için imleç gösterimi gibi işlevleri uygulamak adına editörün üzerine ayrı DOM öğeleri bindirmek gerekiyor
- Temel Yjs işbirliği desteği henüz edge case’leri ele almada zayıf
- Root node adının hardcode edilmiş olması nedeniyle aynı belge içinde birden fazla editörü eşzamanlı kullanmak zorlaşıyor
Gerçek zamanlı işbirliği
- Liveblocks paketi kullanılmadığı sürece Lexical ile işbirliği uygulamak zordur
- StickyNotes örneğinde olduğu gibi birden fazla root node oluşturulurken her biri için ayrı belge ve socket bağlantısı kullanılarak geçici çözüm uygulanır
- Hızlı geliştirme temposu sayesinde sorunlar düzenli olarak çözülüyor
Lexical genişletme
- Lexical, verileri node hiyerarşisi üzerinden yönetir
- Dört çekirdek node türünü miras alarak özel node’lar oluşturulabilir
- React’e özel LexicalComposer ve @lexical/react paketleriyle geliştirme hızı artırılabilir
- Backend’de DOM olmadan Lexical çalıştırmak için @lexical/headless paketi kullanılabilir
Sunucu tarafı değişiklikleri
- Lexical belgelerini sunucuda değiştirmek mümkündür ve Liveblocks bunu basitleştiren bir kütüphane sunar
Artılar
- Yjs ile gerçek zamanlı işbirliği desteği
- Framework bağımsız yapı ve React’e özel paketler
- Yorumlar, mention’lar ve sürüm geçmişiyle entegre Liveblocks desteği
- Meta desteği, çok aktif geliştirme süreci ve büyük topluluk
Eksiler
- Yjs tabanlı gerçek zamanlı işbirliğinde edge case’ler doğrudan ele alınmazsa küçük hatalar görülebilir
- Pure decorations desteği eksiktir ve ileri düzey özellikler için DOM tabanlı geçici çözümler gerekir
- Çekirdek paket boyutu Tiptap ve Slate’e kıyasla daha büyüktür

Slate

Discord, Grafana, Sanity.io, Slite gibi platformlarda kullanılan, özelleştirilebilir bir editör framework’ü
Liveblocks, kendi yorum oluşturucusunda varsayılan olarak Slate’i benimsiyor
Veri yapısı basittir, tam kontrol sunar ve React dışında da genel amaçlı kullanılabilir
Slate’i genişletme
- Slate, çeşitli örnekler ve dokümantasyon aracılığıyla genişletilebilir
- Plugin ekosistemi sınırlı olsa da doğrudan uygulamak çok zor değildir
- Daha genişletilmiş bir yapı olarak Plate adlı bir proje bulunur
Sınırlamalar
- Tiptap’e göre biraz daha büyük bir bundle boyutuna sahiptir
- Yerleşik özellikleri az olduğu için bazı kısımları doğrudan sizin geliştirmeniz gerekir
Gerçek zamanlı iş birliği
- slate-yjs, @liveblocks/yjs gibi araçlarla Slate belgelerinde gerçek zamanlı iş birliği uygulanabilir
Artıları
- Güçlü dokümantasyon desteği
- Yjs ile gerçek zamanlı iş birliği desteği
- Framework bağımsızdır ve React’e özel paketler sunar
- Yüksek genişletilebilirlik
Eksileri
- Tiptap’e kıyasla biraz daha büyük bundle boyutu
- Yerleşik özelliklerin yetersizliği

Quill

Slack, LinkedIn, Figma, Zoom, Miro, Airtable gibi ürünlerde kullanılmış bir geçmişe sahip editör
Bir süre geliştirme yavaşlamıştı, ancak Nisan 2024’te sürüm 2’nin yayımlanması ve TypeScript ile yeniden yazılmasıyla yeniden hareket kazandı
Parchment adlı kendine özgü bir belge modeli kullanır; bu, ProseMirror şemasına benzer bir kavramdır
Sınırlamalar
- Lexical’daki gibi saf decoration özelliği yoktur; bu yüzden renkli vurgulama veya iş birliği imleci gibi özellikler için ayrı DOM öğeleri bindirmek gerekir
- Quill 2 için plugin’ler çoğu zaman hâlâ güncellenmemiş durumda
- Topluluk etkinliği diğer editörlere kıyasla biraz daha düşük olabilir
Gerçek zamanlı iş birliği
- Yjs ve y-quill birleştirilerek gerçek zamanlı iş birliği uygulanabilir
- Ayrı backend olarak Liveblocks gibi farklı yöntemler kullanılabilir
Artıları
- Güçlü dokümantasyon desteği
- Framework bağımsızdır ve React’e özel paketler sunar
- Yjs ile gerçek zamanlı iş birliği desteği
- Basit delta formatı kullanır
Eksileri
- Yerleşik özellikler yetersizdir ve plugin’ler henüz Quill 2’ye uyumlu olacak şekilde güncellenmemiştir
- Saf decoration özelliği eksik
- Görece daha yavaş geliştirme ve daha küçük topluluk
- Tiptap veya Slate’e göre iki kat daha büyük bundle boyutu

ProseMirror

Tiptap, Remirror, BlockNote gibi birçok editörün temelini oluşturan çekirdek framework
Şema, state, view, transform gibi net bir yapı sayesinde kararlı çalışma sunar
Sıfırdan yalnızca çekirdek kütüphane ile bir editör kurmak isterseniz kod miktarı oldukça artma eğilimindedir
Sınırlamalar
- Basit bir editör oluşturmak için bile oldukça fazla kod gerektiği dokümantasyonda açıkça belirtilmiştir
- Tiptap, Remirror, BlockNote gibi daha üst seviye wrapper’ların kullanılması tavsiye edilir
- Öğrenme eğrisi nispeten yüksektir, ancak dokümantasyon ve topluluk iyi oturmuştur
Artıları
- Aktif toplulukla birlikte güçlü dokümantasyon sunar
- Yjs ile gerçek zamanlı iş birliği desteği
Eksileri
- Temel örnekleri bile uygulamak için çok fazla kod gerekir
- Yerleşik özelliklerin yetersizliği
- Görece dik öğrenme eğrisi

Plate

Slate tabanlı, yapay zeka özellikleri, mention ve yorum gibi zengin plugin’ler sunan “her şey dahil” bir proje
Yalnızca ihtiyaç duyulan özellikleri seçerek kullanabildiğiniz için esnektir
Ücretli şablonlar da sunar ve React’e özel tasarlanmıştır
Sınırlamalar
- İş birliği şu anda resmî olarak yalnızca Hocuspocus’u destekler; diğer Yjs backend’lerine (ör. Liveblocks) bağlamak için ek geliştirme gerekir
- React’e özel olduğu için diğer framework’lerle uyumluluk sınırlı olabilir
- Özellik sayısı fazla olduğundan bundle boyutu büyüme eğilimindedir
Artıları
- Çeşitli plugin kütüphaneleri sunar
- Sunucu tarafı düzenleme özelliklerini destekler
- Hızlı başlangıç sağlayan şablonlar sunar
Eksileri
- React’e özel tasarlanmıştır
- İş birliği özelliği yalnızca Hocuspocus üzerinden kullanılabilir
- Temel editörlere kıyasla daha büyük bundle boyutu

Remirror

ProseMirror tabanlı bir editör; Tiptap’e benzer, ancak daha fazla “her şey dahil” yaklaşımını benimser
30’dan fazla plugin, React hook’ları, uluslararasılaştırma (i18n), erişilebilirlik (a11y) gibi özellikleri destekler
MIT lisanslı açık kaynaklıdır ve iş birliği özelliği de sunar
Sınırlamalar
- Tiptap’e kıyasla topluluğu daha küçüktür ve güncellemeler daha yavaş olabilir
- React’e özel özelliklerin fazla olması, diğer ortamlarda kısıt yaratabilir
- Bundle boyutu nispeten büyüktür
Gerçek zamanlı iş birliği
- Remirror, YjsExtension aracılığıyla Yjs ve Liveblocks ile iş birliğini destekler
Artıları
- Güçlü dokümantasyon desteği
- Çeşitli plugin kütüphaneleri sunar
- Yjs ve Liveblocks ile iş birliği desteği
Eksileri
- React’e özel tasarlanmıştır
- Daha büyük bundle boyutu
- Düşük güncelleme sıklığı ve küçük topluluk

Editor.js

Blok tabanlı düzenlemeyi destekleyen bir zengin metin editörü; çeşitli plugin’lere ve büyük bir topluluğa sahiptir
Blok, inline ve tune’dan oluşan bir veri yapısı kullanır
Framework bağımsızdır ve tooltip gibi çeşitli kullanım kolaylığı özelliklerini yerleşik olarak sunar
Sınırlamalar
- Gerçek zamanlı iş birliği resmî olarak desteklenmez; denenmiş bazı PR’lar olsa da bakım durumları belirsizdir
- Yalnızca temel paketle bile boyutu oldukça büyüktür
Gerçek zamanlı iş birliği
- Resmî olarak desteklenmez
Artıları
- Çeşitli özelliklere sahip zengin plugin kütüphaneleri sunar
- Farklı CMS’ler ve backend framework’leriyle topluluk tabanlı entegrasyon desteği
Eksileri
- Daha büyük bundle boyutu
- Gerçek zamanlı iş birliği özelliğinin olmaması

CKEditor

20 yılı aşkın geçmişe sahip bir editör; güncel sürümü (5), modern yapı ve zengin özellikler sunar
Angular, React, Vue, Next gibi farklı framework’leri destekler
GPL-2 lisansıyla dağıtılır; bazı durumlarda açık kaynak olmayı gerektirir ve ticari kullanım için ayrı lisans satın alınması gerekir
Sınırlamalar
- Plugin’lerin önemli bir kısmı ücretlidir ve iş birliği özelliği de yalnızca CKEditor’un bulut hizmeti üzerinden kullanılabilir
- GPL-2 lisansı ve yükleme sayısına dayalı ücretlendirme modeli birçok kullanıcı için engel olabilir
Gerçek zamanlı iş birliği
- CKEditor’un kapalı bulut hizmeti dışında başka bir iş birliği çözümü sunulmaz
Artıları
- Varsayılan olarak çok zengin özellikler sunar
- Çeşitli framework’lerle uyumludur
Eksileri
- İş birliği özelliği CKEditor’un bulut hizmetine bağımlıdır
- GPL-2 lisansı bazı kullanıcılar için kısıtlayıcı olabilir
- Bazı özellikler kullanım bazlı ücretlendirmeyle sunulur

TinyMCE

CKEditor gibi 20 yılı aşkın geçmişe sahip bir editördür ve GPL-2 lisansını kullanır
Angular, React, Vue gibi çeşitli ortamlarda kullanılabilir
Yükleme sayısına dayalı ücretlendirme modeline sahip bir bulut iş birliği hizmeti bulunur
Sınırlamalar
- Markdown, mention, yorumlar, gelişmiş tipografi gibi temel özellikler ücretli plugin’ler olarak sunulur
- Belgeleri sunucu tarafında nasıl işleyeceğine dair dokümantasyon yetersizdir
Gerçek zamanlı iş birliği
- TinyMCE’nin kapalı iş birliği çözümü dışında başka bir yöntem kamuya açık değildir
Artıları
- Varsayılan olarak çok zengin özellikler sunar
- Çeşitli framework’lerle uyumludur
Eksileri
- İş birliği özelliği Tiny Cloud hizmetine bağımlıdır
- GPL-2 lisansı bazı kullanıcılar için kısıtlayıcı olabilir
- Bazı özellikler kullanım bazlı ücretlendirmeyle sunulur

Editör karşılaştırma özeti

ProseMirror
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Sunmaz (örnek mevcut)
- Mentions: Suggestion eklentisi kullanılabilir
- Server-side editing: prosemirror-state ve prosemirror-model ile belgeler Node.js üzerinde düzenlenebilir
- License: MIT
- GitHub Stars: ⭐ 7.8k
Tiptap
- Framework: Vanilla, React, Vue, Svelte
- Collaboration: Liveblocks, Tiptap Cloud, Yjs
- Comments: Liveblocks entegrasyonu ile yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir
- Mentions: Liveblocks entegrasyonu ile yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir
- Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün
- License: MIT
- GitHub Stars: ⭐ 20k
Remirror
- Framework: React
- Collaboration: Yjs
- Comments: Mümkün
- Mentions: Mümkün
- Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün
- License: MIT
- GitHub Stars: ⭐ 2.8k
BlockNote
- Framework: React
- Collaboration: Yjs
- Comments: Liveblocks veya özel örnekler üzerinden mümkün
- Mentions: Mümkün
- Server-side editing: ProseMirror veya Liveblocks'un Node.js ProseMirror paketi üzerinden mümkün
- License: MPL 2
- GitHub Stars: ⭐ 7.1k
Lexical
- Framework: Vanilla, React, iOS, diğerleri
- Collaboration: Liveblocks, Yjs
- Comments: Liveblocks ile entegre edildiğinde yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir
- Mentions: Liveblocks ile entegre edildiğinde yapılandırma gerektirmeden kullanılabilir, özelleştirilebilir
- Server-side editing: Lexical veya Liveblocks'un Node.js Lexical paketi üzerinden mümkün
- License: MIT
- GitHub Stars: ⭐ 20k
Slate
- Framework: Vanilla, React
- Collaboration: Yjs
- Comments: Sunmaz (örnek mevcut)
- Mentions: Örnek mevcut
- Server-side editing: Sunmaz
- License: MIT
- GitHub Stars: ⭐ 30k
Plate
- Framework: Yalnızca React
- Collaboration: Hocuspocus (Yjs)
- Comments: Mümkün
- Mentions: Mümkün
- Server-side editing: Mümkün
- License: MIT
- GitHub Stars: ⭐ 13k
Quill
- Framework: Vanilla
- Collaboration: Yjs
- Comments: Sunmaz (örnek mevcut)
- Mentions: Üçüncü taraf kütüphaneler kullanılabilir
- Server-side editing: Sunmaz
- License: BSD-3
- GitHub Stars: ⭐ 45k
Editor.js
- Framework: Vanilla
- Collaboration: Desteklemez (üçüncü taraf örnekler mevcut)
- Comments: Sunmaz (üçüncü taraf kütüphaneler mevcut)
- Mentions: Sunmaz (örnek mevcut)
- Server-side editing: Sunmaz
- License: Apache 2
- GitHub Stars: ⭐ 28k
CKEditor
- Framework: Vanilla, React, Vue, Angular
- Collaboration: CKEditor Cloud ile entegre
- Comments: Mümkün
- Mentions: Mümkün
- Server-side editing: Mümkün
- License: GPL-2+
- GitHub Stars: ⭐ 8.8k
TinyMCE
- Framework: Vanilla, React, Vue, Angular, diğerleri
- Collaboration: Tiny Cloud ile entegre
- Comments: Tiny Cloud ile entegre
- Mentions: Mümkün
- Server-side editing: Sunmaz
- License: GPL-2+
- GitHub Stars: ⭐ 15k

14 yorum

bingo992000 2025-03-15

QuillJS’i bir SvelteKit projesine uygulamak epey zahmetliydi. React’te ise bir kütüphane olduğu için en azından biraz daha rahattı.

firea32 2025-02-17

React özel bileşen geliştirmesi açısından en kullanışlısı tiptap gibi görünüyor.

vb6ko 2025-02-11

Ben de kısa süre önce araştırmıştım; çok iyi derleyip toparlamışsınız, teşekkürler.

Korece söz konusu olduğunda bazı editörlerde mobilde girişle ilgili ufak tefek hatalar var.
동해물과 yazınca ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ şeklinde girilebiliyor
veya 동해물과 yazınca 동동해해물물과과 şeklinde giriliyor.
(Referans: https://github.com/ckeditor/ckeditor5/issues/13693)

Ben react, vue gibi framework'ler kullanmıyorum ve editör lisansı satın alma fikrine de sıcak bakmadığım için seçeneklerim çok dardı.

Bu yüzden, yazıda geçenlerin dışında aşağıdaki 4 seçeneğe daha baktım.

https://trix-editor.org/
Ruby on Rails'in DHH'sinin liderlik ettiği 37signals'ın yaptığı bir editör. Saf JavaScript ile yapılmış (react vb. kullanılmadığı anlamında) ve özelleştirmesi de çok zor değildi. (YouTube linki yapıştırıldığında otomatik olarak YouTube embed'e dönüşmesi gibi)

https://ui.toast.com/tui-editor
nhncloud tarafından yapılmış bir araç.

https://naver.github.io/smarteditor2/demo/
Bu da Naver SmartEditor2. Klasik ama Koreli kullanıcılara yönelik hizmetlerde sevilen, tanıdık bir seçenek gibi geldi.

https://summernote.org/
Koreli bir geliştiricinin geliştirdiği Summernote. Ben bunu seçtim. Tema uygulanınca oldukça şık görünüyor. Koreli kullanıcıların beklediği özellikler yerleşik geldiği için kullanışlı. (Yukarıdaki YouTube linkini embed'e dönüştürme gibi) Ancak ben bunu Tailwind prose ile stil vermek istedim; kendi typography stilleri olduğu için biraz uğraşmam gerekti.

teddy418 2025-02-11

2 numaralı araçla ilgili düzeltmek istediğim bir nokta var: tui editor, Toss değil NHN Cloud tarafından açık kaynak olarak geliştirilen bir projedir.

vb6ko 2025-02-12

Evet, doğru; düzeltiyorum (düzenlemenin nerede olduğunu bilmiyorum..).

moderator 2025-02-16

nhncloud olarak düzelttim.

carnoxen 2025-02-14

Aslında bu sitede düzenleme yok. Yöneticinin düzenlemesinden başka çare yok.

carnoxen 2025-02-10

Burada yok ama WordPress Gutenberg'in bağımsız bir kütüphane olarak çıkmasını diliyorum.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
Listelenmiş olsa da, metinde tanıtılanlarla kıyaslandığında kullanım örnekleri belirgin şekilde daha az.

carnoxen 2025-02-11

Ah! Meğer Automattic bunu başka bir ad altında barındırıyormuş. Şirkette WordPress kullandığımız dönemde en sevdiğim özellik buydu.

winterjung 2025-02-10

Bağlantı liveblocks.io blogu ama önizleme URL’si (github.com/US-Artificial-Intelligence) olarak görünüyor, öyle mi?

xguru 2025-02-10

Yazıyı paylaşırken önceki yazının adresini aynen kullanmıştım ve düzenleme sırasında bir sorun oldu. Düzelttim.

tsboard 2025-02-10

İlk projemde tiptap’i uygulayıp kullandım; diğer geleneksel editörlerle kıyaslayınca dokümantasyonu, özellikleri ve uygulanışı çok iyiydi, bu yüzden memnun kalarak kullanıyorum. Yalnızca ihtiyaç duyduklarımı alıp arayüzü kendi zevkime göre oluşturabilmek çok hoştu, ama o zevke göre her şeyi hayata geçirmenin iş yükü hiç de az değildi, gerçekten ürkütücüydü...!

babadudu 2026-03-30

TinyMce iyidir