Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#10177 closed Bug (invalid)

<div>tag disappears after inserting style

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

Description

CKEditor 3.x & 4.X

1.- insert div tag 2.- insert another div tag within the already created div tag 3.- insert style <h3> within div tags.

Should look like <div> <div> <h3 style="x"></h3> </div> </div> But instead after inserting the h3 tag, it replaces one of the div tags and then it looks like

<div> <h3 style="x"></h3> </div>

Change History (15)

comment:1 Changed 11 years ago by xiltepin

Summary: <div>tag disappears fter inserting style<div>tag disappears after inserting style

comment:2 Changed 11 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

insert style <h3> within div tags.

This is how block styles work. They are not used for inserting elements but for styling them. If you have cursor inside empty div then to style it as h3 it is being changed to h3.

If you need div div h3 insert e.g. 3 divs or div div p and style p as h3. With default enter mode this is what is happening - when you insert two div containers you get div div p. Styling p creates desired result.

comment:3 Changed 11 years ago by xiltepin

could you be more precise in your explanation? I couldn't understand your last couple lines.

My div tags are still being replaced even when not empty.

comment:4 Changed 11 years ago by xiltepin

I am using <br/> insertion instead of <p>. Is there a way to insert a h3 tag within a div tag?

comment:5 Changed 11 years ago by Jakub Ś

I'm not sure which version do you use but full version (custom version can have it too if you select a plugin) has div container plugin (DIV button on toolbar). After inserting two Containers you have div div p which you can change to H3

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

comment:6 Changed 11 years ago by xiltepin

I am using 3.6.4.

And I am using BR insertion instead of <p> with config.enterMode = CKEDITOR.ENTER_BR; in the config file. Is there any other workaround?

comment:7 Changed 11 years ago by Jakub Ś

Even in version 3.6.4 inserting div container in enter mode set to BR results in extra div. There is no problem with BR mode. Version 4.x works the same.

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

comment:8 Changed 11 years ago by xiltepin

It happens also in version 4.x. Already tried that. Div is a block element. There is no reason why elements within Div that are not block elements should replace a block element which in this case is a div tag. I think this ticket is valid.

comment:9 Changed 11 years ago by xiltepin

Try this code. Try to give some style to the 3rd and last div element (where test2 text is). div will be replaced and the block element will be gone.

<div id="application"> <div> <h3 style="color: red"> Test1<br /> Test1<br /> Test1</h3> </div> <br /> <br /> <div> Test2<br /> Test2<br /> Test2</div> </div>

comment:10 Changed 11 years ago by Jakub Ś

Once more you would need some element there so that it could be replaced with H3. What you are doing is styling divs thus you have the result.

NOTE: I have just tried this in CKE 4.0.2 and CKE 3.6.6. I have put cursor behind first word Test2^. Next I have pressed enter and then I have selected h3 style for new line. Element H3 was created and div wasn't lost. Try it.

comment:11 Changed 11 years ago by xiltepin

Which browser are you using? I am on IE8. I did the same as explained and the div wasn't lost BUT the h3 wasn't created within div. It was created outside. Are you selecting h3 for new line from the config file?

comment:12 Changed 11 years ago by xiltepin

If I am using only 1 div, and I style it, the div is not replaced. It only happens when I use one div within another div, then it is replaced.

comment:13 Changed 11 years ago by Jakub Ś

I did the same as explained and the div wasn't lost BUT the h3 wasn't created within div.

Yes, this is how it works.
If having above code you want to insert new H3 into first Div holding Test2 text you need to have some block element inside that div. What you can do is:

  • Click right behind Test2^
  • Insert new Div with Div container button
  • Then apply style - this new div will be styled as H3 and will be inside div with Test2 text.
Last edited 11 years ago by Jakub Ś (previous) (diff)

comment:14 Changed 11 years ago by Jakub Ś

@xiltepin just to let you know I consulting this issue with my colleagues as this H3, that replaces BR, being created outside of div is a little bit strange to me.

comment:15 Changed 11 years ago by Piotrek Koszuliński

j.swiderski is right in comment:2 that h3 format replaces the innermost block element. This is exactly how it works in this case:

  • Content: <p>X</p><p>foo^bar</p><p>Y</p> (^ means caret position).
  • Apply h3 format.
  • Content: <p>X</p><h3>foo^bar</h3><p>Y</p>.

Or would you like to have this:

  • Content: <p>X</p><p><h3>foo^bar</h3></p><p>Y</p>

I don't think so.

Second case

  • Enter mode = BR.
  • Content: <div><div>Test2^</div></div>.
  • Press enter type sth and apply h3 format.
  • Content: <div><div>Test2</div><h3>sth^</h3></div>.

Repeat these steps in enter mode = P:

  • Content: <div><h3>Test2<br>sth^</h3></div>

This difference is fully intentional. In enter mode = P that <br> is understood as a "soft enter" - it does not create next block like element.

In enter mode = BR that <br> is understood as normal enter, so it separates virtual blocks. And only one block at a time may be transformed to another when applying style.

Think from user's perspective - he sees separate line ("sth") and he has no idea that it is part of bigger div.

Version 0, edited 11 years ago by Piotrek Koszuliński (next)
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy