1

We recently upgraded to 8.2. When editing rich text, if I press Enter at the end of a paragraph, it creates a new paragraph, as expected; however, if my cursor is in the middle of a paragraph, when I press enter it inserts a <br/> tag in the middle of the paragraph and creates a new <p> tag below. My client wants it to instead insert </p><p> in the center of the paragraph on Enter, so that pressing enter breaks the paragraph into two paragraphs.

How do I modify the keypress behavior of the rich text editor in Sitecore 8.2? Ideally this behavior should be on keypress rather than on save.

Edit: To clarify, when editing the text in the rich text editor (by clicking the pencil icon), if I press enter in the middle of a paragraph, it adds

. However, if I am editing directly on the page, NOT in the rich text editor modal, if I press enter in the middle of a paragraph it adds

enter image description here

enter image description here

  • 1
    Does this help? sitecore.stackexchange.com/q/13350/95 – Michael West Jan 24 at 5:01
  • I actually tried that, I set <setting name="HtmlEditor.LineBreak" set:value="p" /> and while it creates new paragraphs when you press enter at the end of a sentence, if you press enter in the middle of an existing paragraph it still inserts a <br> instead of <p>. I know there are workarounds as a content editor but the client wants to change this behavior... – Erica Stockwell-Alpert Jan 25 at 15:44
  • To clarify, when editing the text in the rich text editor (by clicking the pencil icon), if I press enter in the middle of a paragraph, it adds <p></p>. However, if I am editing directly on the page, NOT in the rich text editor modal, if I press enter in the middle of a paragraph it adds <b/> – Erica Stockwell-Alpert Jan 25 at 15:54
7

Figured this out... The script that handles in the inline editing of rich text fields in Page Editor is \sitecore\shell\Applications\Page Modes\InlineEditingUtil.js. The code that was causing the specific behavior of inserting a <br> when in the middle of a paragraph is here:

if (e.keyCode === 13) {
  var lineBreakTag = Sitecore.WebEditSettings.newLineBreak;
  if (lineBreakTag != "p" && lineBreakTag != "div" && lineBreakTag != "br") {
    return;
  }

  e.preventDefault();

  var selection = document.getSelection();
  var range = selection.getRangeAt(0);

  if (lineBreakTag == "br") {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }

  var focusNode = selection.focusNode.parentNode;
  var contentEditable = focusNode.getAttribute("contenteditable");
  if (contentEditable) {
    focusNode = selection.focusNode;
  }

  var length = selection.focusNode.length;
  var startOrMiddlePosition = selection.focusOffset < length;
  var isParagraph = Sitecore.PageModes.InlineEditingUtil.isParagraph(focusNode);
  if (startOrMiddlePosition || !isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }
......

Specifically this part:

if (startOrMiddlePosition || !isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);

which does this:

this.insertBrLineBreak = function (selection, range) {
    var brNode = document.createElement("br");
    range.insertNode(brNode);
    range.setStartAfter(brNode);
    range.collapse(true);
};

So I customized the file like so:

  if (!isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }
  else if (startOrMiddlePosition){
    Sitecore.PageModes.InlineEditingUtil.insertParagraph(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }

this.insertParagraph = function (selection, range) {
  var text1 = range.startContainer.textContent.substring(0, range.startOffset).trim();
  var text2 = range.startContainer.textContent.substring(range.startOffset).trim();

  var p1 = document.createElement("p");
  $(p1).html(text1);

  var p2 = document.createElement("p");
  $(p2).html(text2);

  range.startContainer.remove()
  range.insertNode(p2);
  range.insertNode(p1);

  range.setStart(p2, 0);
  range.collapse(true);
};

Now instead of inserting a line break when in the middle of a paragraph, it will split the paragraph into two paragraph nodes.

  • 1
    Glad you got it sorted out. – Michael West Jan 25 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.