React DOCX editörü: web uygulamanıza Word benzeri düzenleme ekleyin

TX Text Control'un React component'i ile bir React uygulamasına Word benzeri DOCX editörü eklemeyi adım adım anlatan bir rehber; word processing engine, WebSocket'in arkasında ASP.NET Core servisinde çalışıyor. Hosted service, middleware ve CORS kurulumu, Base64 dönen belge endpoint'i ve dosyayı loadDocument() ile yükleme anlatılıyor.

Kilit noktalar

• React editörü @txtextcontrol/tx-react-document-editor npm paketi olarak geliyor ve wss:// üzerinden erişilebilen TX Text Control backend'ine ihtiyaç duyuyor.
• Program.cs içinde engine IHostedService olarak kaydediliyor, UseWebSockets() ve UseTXWebSocketMiddleware() çağrılıyor, http://localhost:5173 için CORS açılıyor.
• Küçük bir controller DOCX dosyasını Base64 string olarak döndürüyor; istemci bunu window.TXTextControl.loadDocument() ve StreamType.WordprocessingML ile yüklüyor.
• Vite projelerinde component sarmalandığı için kod DocumentEditorModule.default ?? DocumentEditorModule ile çözülüyor.
• Hazır ribbon biçimlendirme, tablo, merge field, form öğesi, tracked change ve yorum desteği veriyor; JavaScript API ile bunlar kendi butonlarınızdan yönetilebiliyor.
• saveDocument() düzenlenen belgeyi PDF, DOCX, HTML veya RTF olarak dışa aktarıyor.

TX Text Control, React arayüzüne Word benzeri bir DOCX editörü eklerken ağır belge işlemenin ASP.NET Core tarafında kaldığı bir başlangıç rehberi yayımladı. React tarafında @txtextcontrol/tx-react-document-editor npm paketi ribbon arayüzünü çiziyor ve sunucuyla güvenli WebSocket üzerinden konuşuyor; arka uçta ise satıcının word processing engine'i çalışıyor ve PDF çıktısını da aynı motor ürettiği için ekranda görünen ile dışa aktarılan belge örtüşüyor.

Rehberde engine bir IHostedService olarak kaydediliyor, UseTXWebSocketMiddleware() ile WebSockets ve Vite dev sunucusu için CORS ekleniyor, DOCX dosyasını Base64 string olarak dönen bir controller yazılıyor. İstemci tarafında component webSocketURL ve editMode parametrelerini alıyor, global TXTextControl nesnesi hazır olana kadar bekleyip loadDocument() çağrısını StreamType.WordprocessingML ile yapıyor. Düzenleme, tracked changes, form alanları ve PDF'e kaydetme buradan sonra geliyor.

Gerçek dünyada kullanımı

• Kullanıcıların Office kurmadan tarayıcıda Word sözleşmelerini açtığı, tracked changes ile revize ettiği ve onayladığı bir sözleşme yönetim portalı.
• Veritabanı verisiyle DOCX şablonundaki merge field'ları doldurup sonucu müşteriye PDF olarak veren bir raporlama uygulaması.
• Checkbox ve tarih seçicili DOCX formunu gösterip yanıtları toplayan ve belgeyi blob storage'a geri yazan bir İK işe alım akışı.

Neden önemli

Tarayıcıda çalışan belge editörünün gerçek yapısını gösteriyor: ince bir React sarmalayıcı ve barındırmanız, lisanslamanız, güvenliğini sağlamanız gereken stateful bir sunucu engine'i; yani satın al-ma kararı ve dağıtım planı işin başında verilmeli.

Benzer haberler

• Agent Framework builder skill'leri .NET ve Python coding agent'lar için yayındaAFMicrosoft Agent Framework Blog12 sa önce
• Giderek büyüyen handler imzası: minimal API'lerde [AsParameters] kullanımıDVDEV Community: #aspnetcore19 sa önce
• Alba 9 yolda: paralel integration test için host pooling ve yeni assertion'larJXJasperFx (Critter Stack) Blog2 gün önce