search

ckeditor / ckeditor4

The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
https://ckeditor.com/ckeditor-4
Other
5.79k stars 2.47k forks source link

Support picture HTML tag in image2 plugin #2711

Open chrisgraham opened 5 years ago

chrisgraham commented 5 years ago

Type of report

New Feature

Provide description of the new feature

Modern browsers support <picture> tag. We could add support for it with enhanced image plugin.

https://caniuse.com/#feat=picture https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

Original issue reported

Provide detailed reproduction steps (if any)

Edit content with a picture element...

<picture>
   <source media="(min-width: 641px)" srcset="xxx" />
   <source media="(max-width: 640px)" srcset="yyy" />
   <img src="zzz" />
</picture>

Expected result

image2 should not kick-in as we are not using img.srcset-style responsive images.

Actual result

image2 kicks-in.

An editor's use of image2 causes potential corruption due to methodology conflict.

Editor shows image zzz instead of xxx or yyy based on sizing of editor, causing confusion to novice editors who sees their image changes not showing up after editing but still showing up when going back into edit. This is because the <img> element is wrapped with a <span> to make it a widget, disassociating it from the <picture> element.

Other details

To fix add a simple parent check in the widget's upcastWidgetElement function. This will cause the vanilla image plugin to be used instead.

engineering-this commented 5 years ago

Editor is designed to use only one image plugin at once, so your proposed solution is not something we can do. For now I can suggest using only image plugin until this is resolved.

I'm changing issue type to feature request.

Btw. <picture> tag was supported in Chrome and Firefox since late 2014, while image2 plugin came out in 2013.

engineering-this commented 5 years ago

As a follow up we could add support for the tag in image plugin and easyimage, although with easyimage I'm not sure if it would be useful as images are resized.

Comandeer commented 5 years ago

In case of easyimage responsiveness is delivered via img[srcset] and for most cases picture would be redundant.

chrisgraham commented 5 years ago

"Editor is designed to use only one image plugin at once, so your proposed solution is not something we can do" - try it, it does seem to work. I now have a completely different dialog for editing my <picture> tag's <img> compared to other <img>s, I just triple-checked.

Comandeer commented 5 years ago

@chrisgraham it should not work, as image plugin had code for preventing its loading when image2 plugin was detected since 4.3. This behaviour was slightly enhanced in 4.10.1.

Loading two image plugins at the same time is not officially supported.