htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
<br> vs <p>. Solution for both ie and moz.


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


afru
Novice

Feb 7, 2005, 7:21 AM

Post #1 of 7 (39813 views)
Shortcut
<br> vs <p>. Solution for both ie and moz. Can't Post

Hi guys,

By default htmlarea will insert <p> tag whenever the user press enter and the result is
double line space.

I still dont know why the developers have ignored about catching the key event and
inserting <br> whenever an enter key is pressed.


Ok anyhow I have implemented that in my projects and all my clients are happy with that.

Note : This solution is for htmlArea 3 RC 3 only. However it can be used with previous
versions with little modifications.


Find below code in your htmlarea.js file approximately at about line no:1940


Code
    else if (keyEvent) {   
// other keys here
switch (ev.keyCode) {
case 13: // KEY enter
if (HTMLArea.is_gecko && !ev.shiftKey) {
this.dom_checkInsertP();
HTMLArea._stopEvent(ev);
}
break;
case 8: // KEY backspace
case 46: // KEY delete
if (HTMLArea.is_gecko && !ev.shiftKey) {
if (this.dom_checkBackspace())
HTMLArea._stopEvent(ev);
} else if (HTMLArea.is_ie) {
if (this.ie_checkBackspace())
HTMLArea._stopEvent(ev);
}
break;
}
}



Replace it with the below code




Code
    else if (keyEvent) {   
// other keys here
switch (ev.keyCode) {
case 13: // KEY enter
if(HTMLArea.is_ie)
{
var doc = this._doc;
if (!doc.queryCommandState('insertorderedlist') && !doc.queryCommandState( 'insertunorderedlist' ) && !ev.shiftKey)
{
var sel = this._getSelection();
var range = this._createRange(sel);
range.pasteHTML( '<br/>' );
range.select();
range.moveStart('character',1);
HTMLArea._stopEvent(ev);
}
}
break;
case 8: // KEY backspace
case 46: // KEY delete
if (HTMLArea.is_gecko && !ev.shiftKey) {
if (this.dom_checkBackspace())
HTMLArea._stopEvent(ev);
} else if (HTMLArea.is_ie) {
if (this.ie_checkBackspace())
HTMLArea._stopEvent(ev);
}
break;
}
}



Be sure to take backup of htmlarea.js file before you make any changes.

So that you can revert back if you dont find this useful.

One thing I didnt understand in .js file is dom_checkInsertP() function.

Why did the developers take risk to create a function like this to insert <P> into
mozilla when all users are interested to avoid it and insert <br>. May be there is some
good reason for inserting <p> tags. I just want to know the cause. If anybody have an
idea please post it here.


Please do post your comments because it encourages us to share our code with you.


Hope this little code helps out those who are vexed with Shift + Enter


Cheers

Afru


Quote
Extended File Manager EFM 1.0b for HtmlArea 3.0
Its always very nice to hear comments from others.
Be sure to leave your comments whenever you gain something.





(This post was edited by afru on Feb 12, 2005, 9:53 AM)


jaypee
Novice

Feb 8, 2005, 12:40 AM

Post #2 of 7 (39721 views)
Shortcut
Re: [afru] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post

Didn't try this solution though. But how do you stop a list if you cannot make a <p> tag?


afru
Novice

Feb 8, 2005, 8:57 AM

Post #3 of 7 (39665 views)
Shortcut
Re: [jaypee] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post


In Reply To
Didn't try this solution though. But how do you stop a list if you cannot make a <p> tag?



To stop a list ? Smile

You mean when you are creating a new list item each time by pressing enter? If you want to end the list you just press enter twice to end list tag. Thats simple.

Only problem I have found is, if you type 5 lines by pressing enter at end of each line and if you create a list by selecting them, you will only get one list item with <br> in between them. This happens in ie only. Anyhow its not a big problem because users rearely create lists and works more with general text. And it doesnt look like a bug at all.

However with mozilla, you will get 5 list items for 5 lines. and mozilla works perfectly with this little modification.

Afru.


Quote
Extended File Manager EFM 1.0b for HtmlArea 3.0
Its always very nice to hear comments from others.
Be sure to leave your comments whenever you gain something.





Hipikat
User

Feb 8, 2005, 6:25 PM

Post #4 of 7 (39621 views)
Shortcut
Re: [afru] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post


Quote
all users are interested to avoid it and insert <br>



Certainly when the battle started, the majority were in favour of finding a way of making <p> the standard, and I for one, am still violently in favour of that direction... despite the incredible pain it's caused me trying to implement it. As in,

http://www.htmlarea.com/cgi-bin/forum/gforum.cgi?post=37525

- There are many good reasons for needing one over the other, all depending on circumstance. Thus, the user should be able to enter one or the other. Now, Microsoft has already made <p> on enter and <br /> on shift-enter the standard by virtue of the fact that it's the long-standing behaviour of Word. Thus, they transferred that behaviour to IE. Rather than resist tradition and write (incredibly MS-centric) code to flip IE's behaviour, EnterParagraphs for Gecko simply brings things up to the standard.

- Historically, enclosing markup in logical paragraphs meant you could operate on markup in logical paragraphs. For example, both browser models carry a 'formatblock' option for the 'execCommand' method, to (theoretically) make formattnig 'blocks' easier. A big chunk of text full of <br />'s was still considered one block, so changing a line of text to <h1> would change your whole document if it only had <br />'s. I see however, that behaviour's now changed =P

- Still on the matter of representationality though, from the css point of view, paragraphs are far preferable to lots of breaks, because you can then alter the margins and padding between paragraphs. While (I think) you could do similar things with <br />'s, you'd be limited and get strange results, because the box model was created with enclosing content in mind, rather than telling elements between bits of content what to do with themselves.


afru
Novice

Feb 9, 2005, 8:07 AM

Post #5 of 7 (39566 views)
Shortcut
Re: [Hipikat] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post


In Reply To


- Historically, enclosing markup in logical paragraphs meant you could operate on markup in logical paragraphs. For example, both browser models carry a 'formatblock' option for the 'execCommand' method, to (theoretically) make formattnig 'blocks' easier. A big chunk of text full of <br />'s was still considered one block, so changing a line of text to <h1> would change your whole document if it only had <br />'s. I see however, that behaviour's now changed =P



I agree with your point of view I just didnt get that point that the whole block will get
formatted when applied with <br> inside. You are 101% right. Thanks for pointing me
in right direction.

However, there are times when our users type lots of content without any need for
formatting. Just like the one I am doing now. I mean posting these ideas.
At that times it will really be horrible to use shift+enter. And as per my idea we use to
type lots of content than trying to format with <h1> like things.

Why dont we just creat a plugin with some button known as "New Paragraph". and
keep enter as <br> itself. And when needed the user will create his new paragraph by clicking "New Paragraph" button.

Remember I am not against <p> tags. I am just talking about usage...
We type around 90% of content without any need for formatting and only 10% for
formatting like paragraphs and headings.

Another controversy is portability of content. If you use external css to show your <p>
tags without any padding, it really looks very nice. But what about portability of content, you have to take your css file along with your content to show it somewhere else
without padding. or else there will be double lines view.

Afru.


Quote
Extended File Manager EFM 1.0b for HtmlArea 3.0
Its always very nice to hear comments from others.
Be sure to leave your comments whenever you gain something.





rick_deckard
New User

Feb 13, 2005, 1:43 PM

Post #6 of 7 (39395 views)
Shortcut
Re: [afru] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post

I've got to say that using <p> rather than <br> is one of the best things about HTMLArea IMO. It means I can WYSIWYG semantically valid code, run it through Tidy on the back end and the result is pretty good.

I emphatically do not want a page with lines broken using <br> The option is good, as some paragraphs need line breaks, but linebreaks concern presentation, <p> concerns semantics.


BTW, the EFM is looking real nice!


(This post was edited by rick_deckard on Feb 13, 2005, 1:49 PM)


Sponge
Novice

Feb 18, 2005, 7:16 AM

Post #7 of 7 (39216 views)
Shortcut
Re: [rick_deckard] <br> vs <p>. Solution for both ie and moz. [In reply to] Can't Post

Your code will fail to work in certain events. I've been using quite the same code for a while, although that was used to go from <p> to <div>. Every line is in the CMS here a div.

Eventually my only solution was as simple as this:

p { margin-top: 0em; margin-bottom: 0em; }

Effectively eliminating the P behavious. Then, I afterwards replace the <div> tag.

This is close to near the best solution. I'm not sure about <p>/<br> tags, but some time you WILL get into <p> mode again, and then you're in big trouble. I've spent days to weeks on this, on my previous internship. ( I'm back at the same company working on the editor again as my second internship. near 24.000 lines :P of javascript, and a total of 35 plugins - ugh!)

Anyway, I'd advise you to test a lot. One <p> somewhere will start a vicious circle :)

 
 
 


Search for (options)