Force contenteditable content to be inside div or p
does anyone know how to force a the content of a contenteditable div do be surrounded by a div or a p? If the content of the contenteditable is an empty div - selecting it with a range works on Firefox for example but on chrome the text is inserted before the div. I need the text
HTML:
<div id="edit" contenteditable="true"><div id="insert"></div></div>
Tried this but the results are very inconsistent cross browser:
var range = d开发者_开发知识库ocument.createRange();
range.selectNodeContents(document.getElementById('insert'));
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
The second question here is if this is somehow possible for an empty contentEditable, could this be also used for manually inserting newlines to be sure never to get <br/> tags instead of a new div or p ?
Thanks
Update
It seems the following works at some degree:
<div id="edit" contenteditable="true"><div id="insert"><br/></div></div>
With the additional <br/> Firefox, Chrome, Safari all generate an single empty line where all input ends up inside the div, but Internet Explorer (tested Version 9) shows two empty lines. If there is no other solution available - any ideas how to fix this without using browser detection?
You can override br
tag in your css file.
br {
display:block;
clear: both;
height: 1em;
line-height: 1em;
}
I am not quite sure if em
will work. If not, you'll have to try px
format too.
精彩评论