UploadImage Plugin Widgets not working in IE, Opera, Safari, PhantomJS

[b2m]

Are you reporting a feature or a bug?

Bug

Check if the issue is already reported

None found

Provide detailed reproduction steps (if any)

1. Use the Inline Editor (http://sdk.ckeditor.com/samples/inline.html).
2. Use an id with commas for the editor div (id="introduction,first", valid in HTML 5 https://www.w3.org/TR/html5/dom.html#the-id-attribute).
3. Try uploading an image using Drag & Drop or via paste with embeded base64 image.

Reproduction steps in CKEditor test:

1. Use test: /tests/plugins/uploadwidget/manual/image.md on Safari or other mentioned browser.
2. Edit file: /tests/plugins/uploadwidget/manual/__template__.html with followed things:

• HTML: change textarea into div and add contenteditbale="true"
• HTML: change id to edito,r1 (something with comma)
• SCRIPT: change CKEDITOR.replace into CKEDITOR.inline, add in config extraPlugin: floatingspace, modify name to edito,r1.

3. Try drag and drop image into editor.
4. Optional, if you wish to test it on Chrome: overwrite CSS.escape. Before initializing of editor in point 2 add CSS.escape = undefiend

Expected result

Image is uploaded and inserted into editor.

Actual result

Image is uploaded but not inserted into editor.

Other details

• Browser: IE, Opera, Safari, PhantomJS
• CKEditor version: 4.5 and http://sdk.ckeditor.com/samples/inline.html
• Plugins: uploadimage

Deeper analysis

The reason is the usage of the experimental window.CSS.escape feature (https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape) that is used to generate CSS selectors to identify CKEditor Widgets. You might enhance the alternative escaping in CKEDITOR.tools.escapeCSS` to also escape commas.

[msamsel]

Hi,

I'm not able to reproduce problematic situation. I test it on Safari on MacOS with this code: https://codepen.io/anon/pen/JJxNeE?editors=1010. I use image widget to insert picture to editor. And I'm able to resize it properly.
Can you describe how exactly you resize image so widget has problem? I'll appreciate, if you could also provide some test code, where you was able to see this problem.

[b2m]

Can you describe how exactly you resize image so widget has problem?

Sry I messed up my notes before writing the issue: resizing and moving is not a problem. The problem was inserting images via Drag&Drop and from paste content (base64). I will give codepen a try to generate a reproducible example.

[msamsel]

Don't worry ;) I wait for further description then.
BTW can you check this issue: #643, maybe it covers your problem?

[b2m]

Checked #643 but this is something more delicate.

As promised a codepen simulating the problem of missing CSS.escape capabilities and Editor ids with ,: https://codepen.io/anon/pen/JJQpjv?editors=1010

The test simulates pasting HTML content with a base64 encoded image into the editor.

[msamsel]

Thank you for the example it allowed to reproduce the issue.
I'll modify your description with information how reproduce this error in our tests.
I hope it is described well if not, then please feel free to add more comment to it.

[sculpt0r]

Closed with: #4666