Opened 6 years ago

Closed 6 years ago

Last modified 6 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 6 years ago by xiltepin

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

comment:2 Changed 6 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 6 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 6 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 6 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 6 years ago by Jakub Ś (previous) (diff)

comment:6 Changed 6 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 6 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 6 years ago by Jakub Ś (previous) (diff)

comment:8 Changed 6 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 6 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 6 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 6 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 6 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 6 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 6 years ago by Jakub Ś (previous) (diff)

comment:14 Changed 6 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 6 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 a style.

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

Last edited 6 years ago by Piotrek Koszuliński (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy