Could we have a new Vaadin component: html-editor ?. Similar https://html-online.com/
Now with Vaadin Text Editor, when inserts an image. It will convert image to B64 causing html page is super long and messy.
Sounds like a good idea for an add-on!
Since there is already the Rich Text Editor, I assume there will be no additional official Vaadin component doing the same thing. But it might be something good to create a feature request for, e.g. “allow uploading images to the server using the RTE” or so.
@Stefan.27 you are right. We should have option to upload image to server and only to render it when user loads the web page.
Now, if you want to save the RTE page with images to DB, file size is very big (if you have many images in the RTE)
It is a technical limitation in Quill library, which we have also documented here: https://vaadin.com/docs/latest/components/rich-text-editor#value-format
I have not checked if TinyMCE works better in this use case, but it is worth of trying
1 Like
TinyMCE is still using B64 photo directly in the html page, not support to upload to server.
One thing I am just curiously to know about this forum website if you don’t mind to share:
If user copies and paste a photo into this page but user doesn’t click reply. The photo already uploaded to server successfully and then it becomes an unused photo (trashing data). How do you clean up these unused photos from the server ?
Ok. That is the same as with RichTextEditor component.
The problem here clearly is that the both components assume only single value for the field. So the most feasible option is to include everything in the HTML. This seems not to be Vaadin specific issue, as the both JavaScript libraries are made this way. So clearly this has been seen as the most feasible approach.
What you can do, is to post process the HTML value you get from the RichTextEditor. Vaadin has Jsoup dependency included and it is a powerful tool to do this. So it should be possible to pick the Base64 coded inlined images from the HTML and convert them to image files, while at the same time convert the image tags to use different url that is pointing files you serve in your application.
@Tatu2 Thanks for the advice. The solution sounds promise.