Opened 11 years ago

Closed 11 years ago

Last modified 6 years ago

#6187 closed defect (fixed)

Editor on IE: newlines are too big

Reported by: Douglas Hays Owned by: bill
Priority: high Milestone: 1.2
Component: Editor Version: 1.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

Run test_Editor.html in IE.
Click in the first editor and type a, then press ENTER, then press a.
You can see that the spacing between a's is huge. The problem is that IE separates lines with paragraph tags and the paragraph style has a margin of 1em.

Change History (9)

comment:1 Changed 11 years ago by bill

Milestone: 1.11.2

Think this one can wait 'till 1.2. Not a new problem.

comment:2 Changed 11 years ago by bill

See EnterKeyHandling plugin for possible fix for this (maybe it's not even a bug?). Also can be fixed by style sheet setting.

comment:3 Changed 11 years ago by Douglas Hays

The EnterKeyHandling? plugin fixes this, but there's not a single example of this anywhere that I could find, and why isn't it the default? This can't be fixed with CSS since you have to restyle P tags to not have margin, which will mess up embedded P tags in user content, and with IE there's no way to add complex CSS rules to work around that.

comment:4 Changed 11 years ago by Douglas Hays

shift+ENTER for newlines is another workaround

comment:5 Changed 11 years ago by bill

Description: modified (diff)

Hmm, there is an example in the "plugins specified" part of test_Editor.html but it doesn't seem to be working. Plus which I agree that this should be the default behavior.

comment:6 Changed 11 years ago by bill

Apparently the problem is that dijit._editor.plugins.EnterKeyHandling? defines the default behavior as to insert a <p>:

{{[ blockNodeForEnter: String this property decides the behavior of Enter key. It can be either P, DIV, BR, or empty (which means disable this feature). Anything else will trigger errors. blockNodeForEnter: 'P', }}}

So, to get this to currently work you can (theoretically) declare and Editor using the dijit._editor.plugins.EnterKeyHandling? plugin with the blockNodeForEnter option set to BR.

I'd like for all that to be the default though.

comment:7 Changed 11 years ago by bill

Owner: changed from liucougar to bill
Status: newassigned

comment:8 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [15005]) Fixes #6187: Editor on IE: newlines are too big

  • include and activate EnterKeyHandling? plugin by default
  • set default separator to <br> not <p>

This fixes the "line height problem" on IE by separating lines with <br> rather than <p>, although the downside (besides pulling in four more pages of code) is that users can't create new <p> nodes. But if you just hit ENTER twice it looks the same, so doesn't seem like a big issue.

comment:9 Changed 6 years ago by bill

Note that EnterKeyHandling? with blockModeForEnter=P looks the same on IE, FF,and Chrome; they all have a fair amount of margin between the paragraphs.

So this ticket wasn't about IE so much as about normalizing the behavior between browsers: about whether the enter key inserts a <br> or a new <div> or <p>.

I mention this all in relation to https://github.com/dojo/dijit/pull/6, in which case splitting up logical paragraphs with multiple <br> nodes is especially bad because you can't apply separate LTR and RTL formatting to each (logical) paragraph. I.E. for text like:

This is a paragraph.

This is another.

it should be represented as:

<p>This is a paragraph</p>
<p>This is another</p>

or possibly:

<div>This is a paragraph</div>
<div>&nbsp;</div>
<div>This is another</div>

but not:

This is a paragraph.
<br>
<br>
This is another.

I checked out the CKEditor demo and their apparent default mode is blockModeForEnter=P, where shift-enter inserts a <br>. Tested on Chrome and IE8.

I'm tempted to normalize on that behavior, or on using DIV. I like P in general, but DIV is better for users that don't know about shift-enter (or are on an iPad) and want to have conceptual newlines in their document.

Last edited 6 years ago by bill (previous) (diff)
Note: See TracTickets for help on using tickets.