search

imsky / holder

:city_sunrise: Client-side image placeholders.
http://holderjs.com
MIT License
5.84k stars 592 forks source link

holderjs not working inside tinymce [fiddle included] #219

Closed vmarquet closed 6 years ago

vmarquet commented 6 years ago

I'm trying to use holder inside the tinymce editor but the placeholders are generated only when content is first loaded into tinymce. Placeholders are not generated when content is updated, although I run again the generation function: Holder.run({ images: images }).

I see that at first load, holder generates a data:image/svg+xml image, but when tinymce editor content is udpated and holderjs is rerun, images get broken because their src becomes a blob url, like blob:http://fiddle.tinymce.com/648ccc7b-6e1b-6340-9e3a-c6cb8427fbf8.

You can see the behaviour in this fiddle: http://fiddle.tinymce.com/Bsgaab. Just click the <> button to display source, click ok to set content into the editor, and the image will become broken. When analyzing the image with browser devtools, you'll see that the src is a blob url that points to nothing.

Am I doing something wrong? Does holderjs generates blob url in some cases, or is it something that must be somehow generated by tinymce?

imsky commented 6 years ago

This is an interesting issue. I see the placeholder render and then get reset to the broken blob URL.

I'll have to check this out a bit later - not sure exactly what's going on, but I think the existing blob URL interferes with Holder setting the source.

vmarquet commented 6 years ago

This was due to tinymce, by default the editor rewrites data urls to blob urls. Holderjs works when using a custom function for the images_dataimg_filter parameter in tinymce config.

Maybe there's also a bug in holderjs, maybe not, I don't know if it should have worked without changing the tinymce settings, but that works in my case so I'll stop investigating it further.

Thank you for taking the time to look at this issue.