Handling paragraph (< p >) tags in Ephox Editlive Editor

By default Ephox editor will insert insert an empty paragraph tag with non-breaking space (&nbsp; or &#160;) in code view when you first load EditLive! without any content in its body or when you pressing "Enter" key in the design view of EditLive!

Reasons for above default behavior is

  1.  EditLive assumes user will start typing after the initial load and prepares the editor by placing an empty paragraph at the start of the empty document. This provides a place in the document to actually position the caret and allow the user to start entering text. If the user chooses to insert a heading tag instead of a normal paragraph, EditLive! simply replaces the paragraph with the relevant heading.
  2. Most browsers ignore empty paragraph tags, so to ensure the page displays as the user intended, a non-breaking space is inserted into empty paragraphs.
Note: Recent versions of EditLive have significantly reduced the number of situations when an empty <p> tag will be inserted - including the "empty document case" which now returns the empty string (This is Fixed from EditLive! for LWCM 6+ 3.4.0.9 October 13th, 2009 Includes EditLive! version 7.0.0.270 onwards).

You can change the default behavior of inserting paragraphs when you press the Enter key , following are the instructions

1. Open ephox editlive configuration file
2. find the wysiwygEditor,looks like below

  <wysiwygEditor>
    <!--wysiwygEditor settings-->
  <wysiwygEditor/>

  or 

<wysiwygEditor brOnEnter="false" disableInlineImageResizing="false"
        disableInlineTableResizing="false" enableTrackChanges="false"
        showDocumentNavigator="false" showTableGridlines="true" tabPlacement="bottom"/>

3. change the brOnEnter = true


brOnEnter flag is boolean attribute defines whether a <br> or <p> tag is inserted when the Enter key is pressed. When set to true a <br> is inserted when Enter is pressed, when the Shift + Enter key combination is used a <p> tag is inserted. When set to false this behavior is reversed.Pressing enter when in table fields will always yield a <br> tag, regardless of the value set to brOnEnter.

The default behavior for EditLive! is to insert a <p> on Enter and a <br> on Shift + Enter. This is the same behavior as when this setting is set to false.(Default Value: false)

Click Here for other options

1 comment:

  1. Just for the record, we (Ephox) strongly recommend you don't set brOnEnter to true. Using BR tags to separate paragraphs is semantically invalid HTML and causes accessibility problems for the site. It also causes a number of functions in the editor to behave in a strictly correct, but unexpected way.

    For more information and for tips on getting the effect you want without having to avoid P tags, see: http://www.symphonious.net/2010/09/13/the-importance-and-practicalities-of-p-tags/

    Regards,

    Adrian Sutton
    CTO, Ephox

    ReplyDelete