Execcommand justifyCenter doesn't work in Firefox when a P tag contains BRs inside

Question

I have a contenteditable <Div> with a <P> child, inside the <P> there is some <BR> tags

When I select some text and execute justifyCenter command on it, it doesn't work in FIREFOX, This is the jsfiddle :

http://jsfiddle.net/mody5/LogyL670/

This is the code :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onclick="document.execCommand('justifyCenter', false, null);">center</button>

<div contenteditable="true" style="border:1px solid gray;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco <br><br>laboris nisi ut<br><br><br> aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>


</body>
</html>

Interesting. It _does_ work it you select all the text and then hit "center", but of course that's not what you're after. — Mr Lister, Mar 04 '16 at 18:35
@MrLister it also doesn't work if you select a portion of text — medBouzid, Mar 04 '16 at 18:39
enter creates a new p, shift+enter creates a br, you can possibly change this behaviour with `document.execCommand("insertBrOnReturn", false, true)` — caub, Aug 04 '16 at 09:28

score 1 · Answer 1 · edited May 23 '17 at 12:32

The problem is related to the html contained in the contenteditable div: it seems that in FF a br tag cannot stay inside a paragraph. So, ending the first line with the paragraph closing tag and removing this closing tag at the end all works fine.

Moreover, the justification and other commands work on paragraphs.

So, if you need to add new line in a paragraph contained in a content editable, as reported in HTML - Newline char in DIV content editable?, you need to add to the contenteditable div style a value like:

div: white-space: pre or white-space: pre-wrap

I added another example, copied from the internet just to give you another idea on how to improve your editor (for details see execCommand: how to use):

function justify(mode) {
  document.getElementById('contentEdt').focus();
  document.execCommand(mode, false,false);
}


$(function() {
  $('.wysiwyg-controls a').on('click', function(e) {
    e.preventDefault();
    document.execCommand($(this).data('role'), false);
  });
})

* {
  box-sizing: border-box;
}

.wysiwyg-editor {
  display: block;
  width: 50%;
  margin: 3% auto 0;
  resize: both;
  overflow: auto;
  border: 1px solid #C2CACF;
}

.wysiwyg-controls {
  display: block;
  width: 100%;
  height: 35px;
  border: 1px solid #C2CACF;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #fff;
}
.wysiwyg-controls a {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: top;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #ADB5B9;
}
.wysiwyg-controls [data-role="bold"] {
  font-weight: bold;
}
.wysiwyg-controls [data-role="italic"] {
  font-style: italic;
}
.wysiwyg-controls [data-role="underline"] {
  text-decoration: underline;
}

[class^="menu"], [class^="menu"]:before, [class^="menu"]:after {
  position: relative;
  top: 48%;
  display: block;
  width: 65%;
  height: 2px;
  margin: 0 auto;
  background: #ADB5B9;
}
[class^="menu"]:before {
  content: '';
  top: -5px;
  width: 80%;
}
[class^="menu"]:after {
  content: '';
  top: 3px;
  width: 80%;
}

.menu-left:before, .menu-left:after {
  margin-right: 4px;
}

.menu-right:before, .menu-right:after {
  margin-left: 4px;
}

.wysiwyg-content {
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  resize: both;
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #C2CACF;
  border-radius: 0 0 3px 3px;
  background: #F2F4F6;
  white-space: pre;
}

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<button onclick="justify('justifyCenter');">center</button>
<button onclick="justify('justifyLeft');">left</button>
<button onclick="justify('justifyRight');">right</button>

<div id="contentEdt" contenteditable style="border:1px solid gray;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        <br>
        <br><p>laboris nisi ut</p>
        <br>
        <br>
        <br><p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="wysiwyg-editor">
    <div class="wysiwyg-controls">
        <a href='#' data-role='bold'>B</a>
        <a href='#' data-role='italic'>I</a>
        <a href='#' data-role='underline'>U</a>
        <a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
        <a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
        <a href='#' data-role='justifyright'><i class="menu-right"></i></a>
    </div>
    <div class="wysiwyg-content" contenteditable>
        <p>Lorem ipsum dolor sit amet, 
          consectetur adipisicing 
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            <br>
            <br><p>laboris nisi ut</p>
            <br>
            <br>
            <br><p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

your solution works, but is there a way to keep the selection on the selected text instead of selectAll text then remove the selection, I don't want to lose the selection made by the user after he clicks align button. — medBouzid, Mar 06 '16 at 13:26
by removing your last line Removeallranges, the "selectAll" command is executed and all text is selected and centered, if I remove the "selectAll" command the align button stop working !! — medBouzid, Mar 06 '16 at 14:21
the issue is with firefox and that was the important thing for me :( Thank you for you help, if you find some free time later please don't hesitate to update the answer, I am really in need for that :) Thanks again — medBouzid, Mar 06 '16 at 15:41

Execcommand justifyCenter doesn't work in Firefox when a P tag contains BRs inside

1 Answers1