Function
This plugin tries to make all browsers behave consistently w.r.t
displaying paragraphs, specifically dealing with when the user presses
the ENTER key.
It deals mainly with how the text appears on the screen (specifically
address the double-spaced line problem on IE), but also has some code
to normalize what attr('value') returns.This plugin has three modes:
* blockModeForEnter=BR
* blockModeForEnter=DIV
* blockModeForEnter=P
In blockModeForEnter=P, the ENTER key semantically means "start a new
paragraph", whereas shift-ENTER means "new line in the current paragraph".
For example:
first paragraph <shift-ENTER>
second line of first paragraph <ENTER>
second paragraph
In the other two modes, the ENTER key means to go to a new line in the
current paragraph, and users [visually] create a new paragraph by pressing ENTER twice.
For example, if the user enters text into an editor like this:
one <ENTER>
two <ENTER>
three <ENTER>
<ENTER>
four <ENTER>
five <ENTER>
six <ENTER>
It will appear on the screen as two paragraphs of three lines each.
blockNodeForEnter=BR
--------------------
On IE, typing the above keystrokes in the editor will internally produce DOM of:
<p>one</p>
<p>two</p>
<p>three</p>
<p></p>
<p>four</p>
<p>five</p>
<p>six</p>
However, blockNodeForEnter=BR makes the Editor on IE display like other browsers, by
changing the CSS for the <p> node to not have top/bottom margins,
thus eliminating the double-spaced appearance.
Also, attr('value') when used w/blockNodeForEnter=br on IE will return:
<p> one <br> two <br> three </p>
<p> four <br> five <br> six </p>
This output normalization implemented by a filter when the
editor writes out it's data, to convert consecutive <p>
nodes into a single <p> node with internal <br> separators.
There's also a pre-filter to mirror the post-filter.
It converts a single <p> with <br> line breaks
into separate <p> nodes, and creates empty <p> nodes for spacing
between paragraphs.
On FF typing the above keystrokes will internally generate:
one <br> two <br> three <br> <br> four <br> five <br> six <br>
And on Safari it will generate:
"one"
<div>two</div>
<div>three</div>
<div><br></div>
<div>four</div>
<div>five</div>
<div>six</div>
Thus, Safari and FF already look correct although semantically their content is a bit strange.
On Safari or Firefox blockNodeForEnter=BR uses the builtin editor command "insertBrOnReturn",
but that doesn't seem to do anything.
Thus, attr('value') on safari/FF returns the browser-specific HTML listed above,
rather than the semantically meaningful value that IE returns: <p>one<br>two</p> <p>three<br>four</p>.
(Note: originally based on http://bugs.dojotoolkit.org/ticket/2859)
blockNodeForEnter=P
-------------------
Plugin will monitor keystrokes and update the editor's content on the fly,
so that the ENTER key will create a new <p> on FF and Safari (it already
works that way by default on IE).
blockNodeForEnter=DIV
---------------------
Follows the same code path as blockNodeForEnter=P but inserting a <div>
on ENTER key. Although it produces strange internal DOM, like this:
<div>paragraph one</div>
<div>paragraph one, line 2</div>
<div> </div>
<div>paragraph two</div>
it does provide a consistent look on all browsers, and the on-the-fly DOM updating
can be useful for collaborative editing.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. See class description for more details.
Function
one
two
three
four
five
six
node to not have top/bottom margins,
// thus eliminating the double-spaced appearance.
//
// Also, attr('value') when used w/blockNodeForEnter=br on IE will return:
//
// |
one
two
three
four
five
six
// nodes into a single
node with internal
separators.
//
// There's also a pre-filter to mirror the post-filter.
// It converts a single
with
line breaks
// into separate
nodes, and creates empty
nodes for spacing
// between paragraphs.
//
// On FF typing the above keystrokes will internally generate:
//
// | one
two
three
four
five
six
//
// And on Safari it will generate:
//
// | "one"
// |
one
two
three
four
on FF and Safari (it already
// works that way by default on IE).
//
// blockNodeForEnter=DIV
// ---------------------
// Follows the same code path as blockNodeForEnter=P but inserting a
Function
Handler for keypress events.
String
HTML to stick into a new empty block
Regex
Regex for testing if a given tag is a block level (display:block) tag
Function
Handler for enter key events when blockModeForEnter is DIV or P.
Manually handle enter key event to make the behavior consistent across all supported browsers. See class description for details.
let browser handle
Function
If last child of container is a <br>, then remove it.
Function
one
two
three
four
five
six
node to not have top/bottom margins,
// thus eliminating the double-spaced appearance.
//
// Also, attr('value') when used w/blockNodeForEnter=br on IE will return:
//
// |
one
two
three
four
five
six
// nodes into a single
node with internal
separators.
//
// There's also a pre-filter to mirror the post-filter.
// It converts a single
with
line breaks
// into separate
nodes, and creates empty
nodes for spacing
// between paragraphs.
//
// On FF typing the above keystrokes will internally generate:
//
// | one
two
three
four
five
six
//
// And on Safari it will generate:
//
// | "one"
// |
one
two
three
four
on FF and Safari (it already
// works that way by default on IE).
//
// blockNodeForEnter=DIV
// ---------------------
// Follows the same code path as blockNodeForEnter=P but inserting a
nodes don't have spacing around them,
// thus hiding the fact that ENTER key on IE is creating new
// paragraphs
// cannot use !important since there may be custom user styling;
var doc = this.editor.document;
if(doc.__INSERTED_EDITIOR_NEWLINE_CSS === undefined){
var style = dojo.create("style", {type: "text/css"}, doc.getElementsByTagName("head")[0]);
style.styleSheet.cssText = "p{margin:0;}"; // cannot use !important since there may be custom user styling;
this.editor.document.__INSERTED_EDITIOR_NEWLINE_CSS = true;
}
return d;
let browser handle
Function
Converts a <p> node containing <br>'s into multiple <p> nodes.
See singleLinePsToRegularPs(). This method does the opposite thing, and is used as a pre-filter when loading the editor, to mirror the effects of the post-filter at end of edit.
Function
Called as post-filter. Apparently collapses adjacent <p> nodes into a single <p> nodes with <br> separating each line.
Given this input: <p>line 1</p> <p>line 2</p> <ol> <li>item 1 <li>item 2 </ol> <p>line 3</p> <p>line 4</p> Will convert to: <p>line 1<br>line 2</p> <ol> <li>item 1 <li>item 2 </ol> <p>line 3<br>line 4</p> Not sure why this situation would even come up after the pre-filter and the enter-key-handling code.
Object
Object
Object