Opened 6 years ago

Closed 5 years ago

#8033 closed Bug (invalid)

Fake element get to many paragraphs

Reported by: datalink Owned by:
Priority: Normal Milestone:
Component: Core : Parser Version:
Keywords: Cc: d.efrcz@…


I've written a little plugin for a google map. It places a div with the map source inside. The div has class "googlemapsframe" and if it's opened in editor it is replaced by fake element.
HTML source is:

<div class="googlemapsframe" style="height: 300px; width: 500px">

After fake element replacing editor produces:

  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">

And after saving and reopening editor produce new paragraphs before and behind fake element.
First reopen:

  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">

Second reopen:

  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">

And so on.

Another problem is the width="500" that is set from createFakeElement function. Should I open a new ticket for it?

Attachments (2) (950 bytes) - added by datalink 6 years ago.
fakediv.7z (1.1 KB) - added by Jakub Ś 5 years ago.

Download all attachments as: .zip

Change History (10)

comment:1 Changed 6 years ago by Jakub Ś

Status: newpending

As you said the issue occurs when you use your plug-in. Most obvious answer is that you have done something wrong in it.

Can this issue be reproduced in some sort of simplified test case, not only in your plug-in?

Changed 6 years ago by datalink

Attachment: added

comment:2 Changed 6 years ago by datalink

No, it's not reproducable in another way. I attach a cutted version of the plugin.
Set extraPlugins:'fakediv' and this

<div class="myfakedivsframe" style="width: 350px; height: 200px">&nbsp;</div>

to editor. On every switch to source there are new paragraphs before and behind. Also there is width="350" as a new attribute.

comment:3 Changed 5 years ago by ross-cz

I have same problem with my own plugin, that requires : [ 'dialog', 'fakeobjects' ] and use method editor.createFakeParserElement.

Problem disappears, if you use iframe without iframe plugin or changes to br new lines. But I use, of course, p formating and iframe.

comment:4 Changed 5 years ago by ross-cz

Cc: d.efrcz@… added
Component: GeneralCore : Parser
Keywords: fakeobjects added
Version: (SVN - trunk)

Hi again, do you need any additional info?

Changed 5 years ago by Jakub Ś

Attachment: fakediv.7z added


comment:5 Changed 5 years ago by Jakub Ś

Keywords: fakeobjects removed
Version: 3.6.5 (SVN - trunk)

There are 2 problems I see with this code:

Extra width/height - This is happening because you are trying to change fake element width/height to original element width/height. This is impossible or to be more specific there is no easy way to do it.
To change fake element dimensions you have to modify cke_fakediv class and not fake element. Please check out the attached plugin it contains code in comments in afterInit method. This code changes initial width and height but the problem is that it will work only after you switch to source for the second time.
MY conclusion here is that you can and should only give fixed dimensions in CSS class (cke_fakediv in this case).

Extra paragraphs - As mentioned by @garry.yao in post below, 3rd argument passed to method createFakeParserElement should be real element - div in this case.

I would like to hear how other members of CKSource see this and if I'm wrong what is the proper solution.

Last edited 5 years ago by Jakub Ś (previous) (diff)

comment:6 Changed 5 years ago by Garry Yao

The plugin provided has misused a param of specifying the real element name of the fake element, the correct usage would be:

// The 3th argument is to be specified as the real element name.
var fakeElement = editor.createFakeParserElement( realElement, 'cke_fakediv', 'div', true );

comment:7 Changed 5 years ago by Jakub Ś

Thanks @garry.yao, I have missed that.

Ok so the final outcome for this issue is:

  1. You can only set fixed width/height in CSS class. It's impossible to set elements dimensions in CSS class as nothing is known about the element at the moment CSS class creation.
    There is a possibility but it works only second time you switch to source and back so it is almost the same as if it didn't work.
  1. Changing the element name to real element helped. There are no extra paragraphs or similar issues.

There is just one problem left when div is empty or has only one &nbsp; it will get removed. If it has anything more like two &nbsp; it will be left untouched.

<div class="myfakedivsframe" style="width: 350px; height: 200px">&nbsp;&nbsp;</div>

comment:8 Changed 5 years ago by Jakub Ś

Resolution: invalid
Status: pendingclosed

Based on the above comment I'm closing this ticket as invalid.

For problem with one &nbsp; in div element a new ticket was opened - #9418

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