Fake element get to many paragraphs

[datalink]

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">
  ... GOOGLE MAP SOURCE ...
</div>

After fake element replacing editor produces:

<p>
  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">
    ... GOOGLE MAP SOURCE ...
  </div>
</p>

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

<p>
  &nbsp;</p>
<p>
  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">
    ... GOOGLE MAP SOURCE ...
  </div>
</p>
<p>
  &nbsp;</p>

Second reopen:

<p>
  &nbsp;</p>
<p>
  &nbsp;</p>
<p>
  <div class="googlemapsframe" style="height: 300px; width: 500px" width="500">
    ... GOOGLE MAP SOURCE ...
  </div>
</p>
<p>
  &nbsp;</p>
<p>
  &nbsp;</p>

And so on.

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

[Jakub Ś]

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?

[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.

[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.

[ross-cz]

Hi again, do you need any additional info?

[Jakub Ś]

modified

[Jakub Ś]

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 - I think it has to do with how parser works and IMHO it can't be fixed. Fake element is represented by img which in editor is seen as inline (isBlockLike property is false). Div on the other hand is block element.
This is what I think is happening - Every time you switch between wysiwyg and source, editor sees: image and wraps it in paragraph but then image is changed into div so it is being moved out of paragraph and so on.
The only way to work around this problem is to change div to some kind of inline element like object/iframe or span (which is ok if this element won’t contain other block elements).
MY conclusion here is that you can only use inline elements to replace them with fake element

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

[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 );

[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.

2. 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   it will get removed. If it has anything more like two   it will be left untouched.

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

[Jakub Ś]

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

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