The pre button of CKEditor 3.6.2 adds extra new lines

[vijendra]

The pre button of CKEditor 3.6.2 ASP.Net, adds extra new lines.

To reproduce this issue type following "test Test Test Test"

Then select the text and click the pre button of ckeditor. The editor adds extra lines. When you hit the Source button to check whats happening inside You will find that, the editor converts each of <p> and </p> with \n. I letter changed the default enterline mode from P to BR. But then hitting the pre button caused the entire text and not just the selected text, to get wrapped inside the PRE tag. I configured the editor by writting writer rule for BR tag to not add new line before and after the beggining and end of BR tag. And also configured the editor to use self eding tag for BR so as to generate <BR/> tag.

[vijendra]

The pre button of CKEditor 3.6.2 ASP.Net, adds extra new lines.

To reproduce this issue type following "test
Test
Test
Test"

Then select the text and click the pre button of ckeditor. The editor adds extra lines. When you hit the Source button to check whats happening inside You will find that, the editor converts each of <p> and </p> with \n. I letter changed the default enterline mode from P to BR. But then hitting the pre button caused the entire text and not just the selected text, to get wrapped inside the PRE tag. I configured the editor by writting writer rule for BR tag to not add new line before and after the beggining and end of BR tag. And also configured the editor to use self eding tag for BR so as to generate <BR/> tag.

[Jakub Ś]

Please upgrade to latest CKEditor for ASP.NET as this issue doesn't occur there.

[vijendra]

No, the issue occur in new version of CKEditor as well Try these steps:

1. Go here ​http://ckeditor.com/demo
2. Copy following text and paste it in CKEditor

"test1

Test2
Test3
Test4"

3. Then select only 3rd and 4th line and click PRE
4. You can see that the entire text gets wrapped inside PRE

Replying to j.swiderski:

Please upgrade to latest CKEditor for ASP.NET as this issue doesn't occur there.

[Jakub Ś]

1. Which Browser are you talking about?
2. What do you mean by "entire text gets wrapped inside PRE". Only text in selection gets wrapped in pre but this is correct behaviour.

[vijendra]

Please check the attached screeshot.

[Jakub Ś]

I have but it doesn't tell me which browser do you use and I don't see whole text getting wrapped to pre. All I see is -

Only text in selection gets wrapped in pre but this is correct behaviour.

Perhaps you might want to give me more detailes?

[vijendra]

It is reproduciable in all browser. Do follwing steps.

1. Go to ckeditor demo page.
2. Copy below text and paste into ckeditor.

"test1
test2
test3
test4"

3. Now select the 3rd and 4th line "test3 and test4" and from the format dropdown select Formatted option. It will not only wrap "test3 and test4" but "test1 and test2" as well inside PRE tag.

If you still didnt understood. Then do following.

1. Set the EnterMode to BR or DIV.
2. Type Test then press enter, again type test and press enter. Do this few more time. It will create few lines each having only one word Test. Select few lines from it.
3. Select the Formatted option from Format dropdown. It will wrap all the lines in PRE .

If you still didnt understood the issue then i will attach video tomorrow please check that.

'Replying to j.swiderski:

I have but it doesn't tell me which browser do you use and I don't see whole text getting wrapped to pre. All I see is -

Only text in selection gets wrapped in pre but this is correct behaviour.

Perhaps you might want to give me more detailes?

[Jakub Ś]

I have tried in BR, DIV and P mode and none of this resulted in error.

I'm attaching the screen cast for you to see. Test case seems easy and yet we get different results. What have I missed?

[vijendra]

I have added the video please check. I am using IE10. The behavior is same on Chrome and FF as well. You can reproduce the issue by following below steps:

1. Go to CKEditor Demo page.
2. Copy below text (don't type, just copy) and paste it into CKEditor

"test1
test2
test3
test4"

3. Now select the last line.
4. Then select the formatted option from the Format dropdown.

Please see the attached video file. ​https://dev.ckeditor.com/attachment/ticket/9753/PRE%20wrapping%20all%20text.swf

[vijendra]

I have added the video please check. I am using IE10. The behavior is same on Chrome and FF as well. You can reproduce the issue by following below steps:

1. Go to CKEditor Demo page.
2. Copy below text (don't type, just copy) and paste it into CKEditor

"test1
test2
test3
test4"

3. Now select the last line.
4. Then select the formatted option from the Format dropdown.

Please see the attached video file. ​https://dev.ckeditor.com/attachment/ticket/9753/PRE%20wrapping%20all%20text.swf

[vijendra]

I have added the video please check. I am using IE10. The behavior is same on Chrome and FF as well. You can reproduce the issue by following below steps:

1. Go to CKEditor Demo page.
2. Copy below text (don't type, just copy) and paste it into CKEditor

"test1
test2
test3
test4"

3. Now select the last line.
4. Then select the formatted option from the Format dropdown.

Please see the attached video file. ​https://dev.ckeditor.com/attachment/ticket/9753/PRE%20wrapping%20all%20text.swf

Replying to j.swiderski:

I have tried in BR, DIV and P mode and none of this resulted in error.

I'm attaching the screen cast for you to see. Test case seems easy and yet we get different results. What have I missed?

[Jakub Ś]

Not it is clear but the issue is still invalid.

When you paste text like this from notepad it gets pasted as single p (One enter from notepad gets changed to br. Two enters from notepad get changed to p - this was unified in CKEditor 4). Single P as you probably know is in HTML5 flow element (referred in HTML4 as Block-level element). Element Pre is the same - flow/block.

Editor works like that by design - block/flow element replaces whole block/flow element, not just selection. Replacing selection works with phrasing/inline elements.

[vijendra]

Its an issue for all those normal users who paste text thousands of times directly from email, notepad, Edit++ etc. to the CKeditor and apply the Format option over few of the selected text. We cant expect that the normal user has knowledge of HTML5 flow elements or how the Editor works.

Unbelievable that despite of showing the issue, still its been closed as Not a Bug.

Also, not all editors works this way, please verify the same behavior here ​http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx .

[Jakub Ś]

You can get the same in CKEditor just go to enter mode BR sample - ​http://ckeditor.com/demo#enter

Paste contents from notepad, select only last "test" and change it to PRE - it will work the same. All you need to do is change enter mode to BR.

[vijendra]

So does that mean I should use the non recomended setting just because the recomended setting has issues? Why cant we fix the issue rather?

Replying to j.swiderski:

You can get the same in CKEditor just go to enter mode BR sample - ​http://ckeditor.com/demo#enter

Paste contents from notepad, select only last "test" and change it to PRE - it will work the same. All you need to do is change enter mode to BR.

[Jakub Ś]

Why cant we fix the issue rather?

Because as I have explained this is by design. This is how CKEditor works. One block-level element is replaced with other.

[vijendra]

Ok so can we assume this is a product limitation and can we have it documented somewhere in the ckeditor wiki? For normal user they dont have knowledge about what is an flow element or how the editor works.

So I would like to have this limitation documented in wiki or we should make the BR Enter mode as the standard enter mode.

[Piotrek Koszuliński]

This is not a product limitation. This is designed this way and this requires from the user just the basic knowledge about text editing in any of the professional well known editors like MS Word or Libre Office.

There are block styles and inline styles. Block styles are always applied to entire blocks, not to the selected lines only. This is how CKEditor, MS Word and Libre Office work.

Keep in mind that in enterMode=P users will create <br> intentionally, so mostly - in special cases, because it's natural to press enter only. So your case with "a<br>b<br>c..." is just wrong, because that doesn't happen in "nature".

[vijendra]

Consider this case now. I select few text and hit the B button, this will make the selected text to apear in bold. Now when I do same thing but in this case hit Formatted option from format dropdown it wraps the entire content within PRE tag and not just the selected text. Isnt this sound confusing to the normal user. I have asked few other people and they to thought this as a bug in CKEditor, the reason is simple they expected ONLY the selected text to get wrapped inside PRE not the entire text. If you can fix this then its ok. But for normal users this looks like a bug.

Replying to Reinmar:

This is not a product limitation. This is designed this way and this requires from the user just the basic knowledge about text editing in any of the professional well known editors like MS Word or Libre Office.

There are block styles and inline styles. Block styles are always applied to entire blocks, not to the selected lines only. This is how CKEditor, MS Word and Libre Office work.

Keep in mind that in enterMode=P users will create <br> intentionally, so mostly - in special cases, because it's natural to press enter only. So your case with "a<br>b<br>c..." is just wrong, because that doesn't happen in "nature".

[Frederico Caldeira Knabben]

We've been discussing this issue in the team.

While MS Word makes it possible to have selected words styled like blocks (e.g. headers), we have to take in consideration that it is a desktop application that is not made to deal with HTML and the web. It's made for printing. So, it's environment is much more flexible, giving the possibility for users to mess up their documents that way.

With HTML instead, we can't simply put a block element, like <h1> or <pre> in the middle of the text. The only option we would have is breaking the paragraph in 3 parts (before, selection and after), creating 3 separate blocks. But then this would be also an ugly and unnexpected behavior.

So, considering that no other option is available, the current solution is the most adequate we can provide.