Opened 3 years ago

Last modified 3 years ago

#16827 pending Bug

Container span with drag handle being added to widget after updating to 4.6.1

Reported by: Peter Storey Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

Steps to reproduce

  1. Add some form of widget into a ckeditor
  2. Switch to source view and back again

Expected result

Should be the same as before going into source mode

Actual result

It added a container span around the element as well as an image after it that looks like a drag handle. Repeatedly switching between source and html adds more wrappers and more drag handle images, some of which end up being block-level. These elements persist after saving the content of the ckeditor and viewing it outside this context, e.g. the iframe that gets added into the content we're editing can be selected like a ckeditor element even outside of ckeditor.

Other details (browser, OS, CKEditor version, installed plugins)

Tested in chrome and edge. Bug did not happen in 4.5.x, it only took place after updating to 4.6.x.

Has widget plugin installed, both the 4.5.x version and the 4.6.x version exhibit the same behaviour.

The widget in question is a custom google maps plugin which is supposed to output an iframe in a wrapping div. It also takes place when using the oembed plugin, which uses a widget.

Attachments (1)

Capture.PNG (174.7 KB) - added by Peter Storey 3 years ago.
What the element looks like with the extra stuff

Download all attachments as: .zip

Change History (5)

Changed 3 years ago by Peter Storey

Attachment: Capture.PNG added

What the element looks like with the extra stuff

comment:1 Changed 3 years ago by kkrzton

Status: newpending

There was similar issue reported #14753. Looking at your screenshot and the jsfiddle demo from #14753 the effect is the same so maybe the cause of the issue is similar? Could you also provide the sample output html which are you getting from CKEditor while the issue occurs?

comment:2 Changed 3 years ago by Peter Storey

<span aria-label="div widget" contenteditable="false" role="region" style="width: 500px;" tabindex="-1">
<div class="powermaps"><iframe border="0" class="powermap" height="500" src="/ekmps/data/ckeditor/plugins/powermaps/googlemapsmall.html?lat=53.61491006576629&amp;lon=-2.152478271484366&amp;zoom=12&amp;height=500&amp;width=500" style="border:0" width="500"></iframe>
<div class="powermapMarkers" style="display: none"></div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" /><span style="background: url(&quot;http://youraccount.ekmpowershop109.com/ekmps/data/ckeditor/plugins/widget/images/handle.png&quot;) rgba(220, 220, 220, 0.498039); top: -15px; left: 0px; display: block;"><img draggable="true" height="15" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="Click and drag to move" width="15" /></span></span>

This is the output I'm getting. The div.powermaps and everything within is what you'd expect, everything around it is the stuff causing the problems.

comment:3 Changed 3 years ago by Peter Storey

By the way, my temporary fix has been to put a function in our data processor to unwrap both the elements we have as widgets, which is very hacky and unpleasant.

I already tested the data processor, commenting out the whole file the problem persisted.

comment:4 Changed 3 years ago by Jakub Ś

Keywords: widget oembed removed
Version: 4.6.1

The oembed plugin is a third-party plugin but I have decided to give it a try anyway and could not reproduce the problem even after multiple switches. There was only one handler all the time.

I have next tried same test case with ACF disabled but the result was the same. I have tried CKEditor 4.6.1 and 4.6.2.

	allowedContent : true, 
	extraPlugins : 'oembed'

@bunnielovekins are you still able to reproduce this issue? Could you perhaps try reproducing it in standalone CKEditor outside of your application in order to exclude the influence of third party scripts? Please also try using default CKEditor setup with necessary extra plugins only.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy