Hey all
I just noticed some weird effects after upgrading to 2.4 that troubles me a little and was wondering if anybody has any comments on this. Is it a bug, or a feature? My setup has Enter as div and Shift+Enter as br
Copy the follow html to a editor source view:
---
<div class="test" style="border:1px solid black;">Test class</div>
<br>
Unformatted text
---
Flip over to normal view and right back to source again. The code is changed to:
Firefox 1.5
---
<div class="test" style="border: 1px solid black;">Test class</div>
<div><br />
Unformatted text</div>
---
IE 6
---
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid">Test class</div>
<div><br />
Unformatted text</div>
---
This is not the real problem. When I use the Enter button, the parent DIV gets copied , instead of a nice new empty one being created.
Firefox 1.5 (^ is cursor position)
---
<div class="test" style="border: 1px solid black;">Test class^</div>
<br>
Unformatted text
---
becomes
---
<div style="border: 1px solid black;" class="test">Test class</div>
<div style="border: 1px solid black;" class="test">^ </div>
<div><br />
Unformatted text</div>
---
IE 6
---
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid">Test class</div>
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid"> </div>
<div><br />
Unformatted text</div>
---
All I wanted was :
---
<div class="test" style="border:1px solid black;">Test class
<div> </div>
</div>
<br>
Unformatted text
---
As you can see IE completely messes up things by adding explicit values for the border right,top,bottom and left, Firefox does not, but the real problem is that the parent div, class=test and style=border... is also being copied ?? If I use the Enter with the cursor at the end of the Unformatted text line, the empty div is created as it should in both IE and Firefox. This creates a real problem with templates that has boxes div elements, as the box gets re-created every time the user presse enter, creating a endless box in a box situation.
My problem here is how do I prevent the parent div attributes to be copied. Any suggestion?
By the way, the fact that Ie adds the extra styles does not bother me that much..
Kind Regards
Willem
I just noticed some weird effects after upgrading to 2.4 that troubles me a little and was wondering if anybody has any comments on this. Is it a bug, or a feature? My setup has Enter as div and Shift+Enter as br
Copy the follow html to a editor source view:
---
<div class="test" style="border:1px solid black;">Test class</div>
<br>
Unformatted text
---
Flip over to normal view and right back to source again. The code is changed to:
Firefox 1.5
---
<div class="test" style="border: 1px solid black;">Test class</div>
<div><br />
Unformatted text</div>
---
IE 6
---
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid">Test class</div>
<div><br />
Unformatted text</div>
---
This is not the real problem. When I use the Enter button, the parent DIV gets copied , instead of a nice new empty one being created.
Firefox 1.5 (^ is cursor position)
---
<div class="test" style="border: 1px solid black;">Test class^</div>
<br>
Unformatted text
---
becomes
---
<div style="border: 1px solid black;" class="test">Test class</div>
<div style="border: 1px solid black;" class="test">^ </div>
<div><br />
Unformatted text</div>
---
IE 6
---
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid">Test class</div>
<div class="test" style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid"> </div>
<div><br />
Unformatted text</div>
---
All I wanted was :
---
<div class="test" style="border:1px solid black;">Test class
<div> </div>
</div>
<br>
Unformatted text
---
As you can see IE completely messes up things by adding explicit values for the border right,top,bottom and left, Firefox does not, but the real problem is that the parent div, class=test and style=border... is also being copied ?? If I use the Enter with the cursor at the end of the Unformatted text line, the empty div is created as it should in both IE and Firefox. This creates a real problem with templates that has boxes div elements, as the box gets re-created every time the user presse enter, creating a endless box in a box situation.
My problem here is how do I prevent the parent div attributes to be copied. Any suggestion?
By the way, the fact that Ie adds the extra styles does not bother me that much..
Kind Regards
Willem
RE: Preventing class inheritance?
It seems that when inside a DIV, pressing Enter creates another DIV no matter what you do, nested or sibling...
RE: Preventing class inheritance?
RE: Preventing class inheritance?
Just think about how does MS Word works, and what do people expect:
You are in a paragraph with a set of styles like font family, size, margin between paragraphs, you press enter to finish the current paragraph, and then there's the new paragraph, would you like to have to set again the same properties on that paragraph?
The logical behavior is to keep the previous attributes as it's described in the EnterKey documentation: http://wiki.fckeditor.net/EnterKey
RE: Preventing class inheritance?
I agree on the way the way that Word works and the peoples expectations, but I need to come up with some solution to the following layout.
Page content contains a DIV "content", that seperates the content from the navigation. Inside this DIV is nested DIV's that contain summaries or text, lets call them "columns". Inside these "columns" are headings, and plain text, sometimes even Images.
So... you create this page that contains the "content", with lets say 2 "columns" of content, horizontally aligned, each having its own heading, lets say the 2 colums conatin NEWS summaries. The 2 columns are nicely bordered in boring grey to make it visually easy to use. The headings inside the colums are pastel background coloured so one can keep the corporate design team happy, but the content editing does not go so well because...
Every time a "author" edits the page to update the News summary, the heading in the H1-6 is updated no sweat, but the actual summary is a mess. Each time a paragraph is required, a new DIV is created, copying the parent div, which has this nice grey border.
My solution, tell the users to use shift+Enter to create {paragraph} space. But this is like trying to kill a fire with jetfuel... it makes it only worse.
So you end up creating all this content with breaks in it, that display only correct on the original "author" browser and has a bizzare resemblance to a moth eaten coat when the rest of the world looks at it. Not becase it misses any content, but because it breaks in weird places.
If you like, I will create a demo to illustrate this.
My goal is to try and get two versions working, so i can evaluate the pro and con's of the two.
1st goal - Get the enter handlers to insert a new div with parent style, and remove the style with the format dialog
2nd goal - Get the enter handlers to insert a new div wihtout preant styles, and ass the styles with the format dialog.
What do you think Alfonso... I hope that you understand my problem here. A third solution could be if the Enter handler could take a empty value. This will allow the user to make line break in the GUI that does not actuall insert any HTML, just visually wrap the text. The secondary value {Shf+Ent} can the n be used for the new DIV creator...
Thanks for the time on this.
Kind Regards
Willem
RE: Preventing class inheritance?
Your main problem is that you are trying to reuse the same tag (div) for both the main layout of your page and to create the blocks of text.
If you use p for each paragraph then everything is clearer and it would be this bug: http://dev.fckeditor.net/ticket/99
If you want to reuse divs all the way, it's quite hard to tell when should the current styles be kept and when it must do a clean tag or create the new tag inside the current container.
> This will allow the user to make line break in the GUI that does not actuall insert any HTML, just visually wrap the text.
That would be a <br>
RE: Preventing class inheritance?
My last suggestion I think you did not get. What I ment by adding a line break to the GUI that does not actually insert any HTML was the following.
Enter = chr(10) or chr(13) or both
Shift+Enter = br
This would then allow you to have the user enter whenever he likes to get to a new line, but NOT add a <br>. This could be very usefull, as when you then save the content, it can be displayed on a 800x600 or 1600x1024 screen with proper scaleable styles. If you however insert the <br> tags, the text will break at the designated places, and might not look very good in hig res display.
What would be nice to have is the following options for the EnterHandler *=new
div
p
span*
br
chr(10)*
chr(13)*
custom * {some indicator should be added for tag pairs or single tags}
It would give me as developer a bit more freedom to customize the behaviour...
I relize there is stil plenty of work to be done on this handler and hope that some of my input is helpfull..
Thanks for your time ... I guess that is all there is to be said about this then...
RE: Preventing class inheritance?
>
>Enter = chr(10) or chr(13) or both
>Shift+Enter = br
But you should know that adding a chr(10) won't be displayed as a line break in an HTML document. I really can't understand what you want (or at least think about how it could work)
If a user inserts a new line I think that he will want that line to be there, no matter the resolution of the page visitor, if he doesn't want the page to break at a certain resolution then he should include line breaks.
RE: Preventing class inheritance?
The reason I am suggesting the chr(10) or new line is to prevent the user from adding all this extra HTML to the content. In most cases the editor area is not the same size as the actual final content, so the author tries to make the content look nice by adding line breaks. Then when the page is saved, the line breaks appear in diffrent places than where he added them, because the display area is now bigger. What I would like to do is make the default Enter a normal chr(10) {NO HTML}. Then after the user comes to me and say "But I added a enter, and it did not work!!"
I can tell him to use shift+Enter to make it work. {Enter=chr(10) and Sft+Enter=<p>}
This takes care of a big problem for me. Novice users use the Enter button for everything, even if they just want to go to the next line, and then they try to backspace to remove the xtra space. In the source however, it creates a nightmare, as you create a P tag, and then when you try to backspace, it does not remove it.. so in a matter of 30 seconds a novice user is able to make a simple paragraph, into a HTML nightmare.
What I want with the chr(10) or \n or new line caracter is to be able to create a interface if needed, that prevents a novice from destroying the content in 30 seconds. I am not saying that this should be the default, just a possibility.