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.: Edit Log



afru
Novice

Feb 7, 2005, 7:21 AM


Views: 38661
<br> vs <p>. Solution for both ie and moz.

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)


Edit Log:
Post edited by afru (Novice) on Feb 7, 2005, 10:00 PM
Post edited by afru (Novice) on Feb 12, 2005, 9:53 AM


Search for (options)