Menu
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>
826
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
