Sticky WYSIWYG toolbar + image upload?
Looking to make the WYSIWYG toolbar sticky, also looking to add ability to insert images from media library into the WYSIWYG as a toolbar option?
5 Replies
😴
Hi @Braunson the
limitHeight boolean on the field is kinda what you're looking for re:sticky. Inserting images in a wysiwyg field is a bad practice which is why it is not supported. You should use a block editor.
A text block followed by an image block followed by a text block would produce the same results with better data integrity and controlYeah I understand that, I guess we're outgrowing Twill in feature.. ie sure it's not a great practice but again the people using it are FE devs so they don't necessarily need guardrails. I'll figure a workaround.
I mean it is technically possible, you could have your own tiptap vue component where you enable the image feature
but by default it stores it as base64 in db which is... pretty bad
at some point we'll work on integrating something like lexical so we can do blocks within the editor itself
Curious to hear more about the use case. why would FE devs not need guardrails from the backend tool they are using?
Hey! 👋 Totally get where you’re coming from — sometimes best practices don't align perfectly with real-world workflows, especially when the end users are experienced frontend devs who just want flexibility and speed.
I agree that inserting images directly into the WYSIWYG isn’t ideal for data integrity, but I also understand the practical need. Twill’s block editor is amazing for structured content, but for certain types of editing, a more free-form approach just makes sense.
It is possible to extend the WYSIWYG using a custom Tiptap Vue component and enable image uploads — though yeah, by default it stores images as base64, which isn’t great. I’d suggest overriding that behavior and hooking into the media library modal instead, letting users select and insert images by URL or ID reference instead of base64 blobs. That way we get the flexibility and keep the data clean.
Also, for the sticky toolbar — enabling the limitHeight flag is helpful, but we can also enhance it with a bit of custom JS/CSS to keep the toolbar fixed on scroll within the editor container.
If you’d like, I can help implement this hybrid solution — clean, flexible, and custom-fit to your team’s real-world workflow. 🚀
Let me know how deep you’d like to go!