I’m working on a Vue app that lets users upload, edit, and download files. We’re using Azure Blob storage for file management. Now I want to add a feature where users can open these files in a Google Docs-like editor right in the app.
The goal is to let users view, edit, and save file content without leaving the app, similar to how Box does it. I’ve looked around but can’t find any clear guides on how to set this up.
Has anyone done something like this before? What’s the best way to go about it? I’m not sure if I should use an API or if there’s a plugin that could help. Any tips or resources would be really helpful.
I’m particularly interested in:
- How to load the Azure Blob files into the editor
- How to handle saving changes back to Azure
- Any potential issues with different file types
Thanks in advance for any advice!
I’ve implemented something similar in a project, and it’s not as straightforward as you might hope. We ended up using Quill.js as our rich text editor, which worked well for most document types. For Azure integration, we wrote custom handlers to fetch and save blobs.
The trickiest part was handling different file formats. We converted everything to HTML on the backend before sending it to the editor, then converted back on save. This worked for most text-based files, but struggled with complex formatting or spreadsheets.
For real-time collaboration, we added Socket.io to sync changes between users. It took some work to get it all running smoothly, especially with larger files.
My advice: start simple with basic text editing and build up features gradually. It’s a complex undertaking, but definitely doable with patience and careful planning.
hey, i’ve done smth similar! we used tiptap editor, it’s pretty flexible. for azure stuff, we made custom plugins to handle blob operations. loading was easy, just fetch and parse. saving was trickier, had to optimize to avoid constant uploads.
watch out for big files tho, they can slow things down. we ended up chunking data for smoother performance. goodluck with ur project!
I’ve tackled a similar challenge in my work, and it’s definitely a complex task. We opted for CKEditor, which proved robust for our needs. The key was setting up a custom file adapter to handle the Azure Blob interactions.
For loading files, we created a middleware that fetched the blob content and transformed it into a format CKEditor could work with. Saving was trickier - we implemented a debounce function to avoid constant saves, then used Azure SDK to update the blob.
File types were indeed a headache. We focused on common formats like .docx and .txt, using libraries like mammoth.js for conversions. For more complex files, we defaulted to a read-only view.
Performance became an issue with larger files. We ended up implementing lazy loading for content sections to keep things snappy. It’s a challenging project, but absolutely achievable with the right approach and some patience.