开发者

Force contenteditable content to be inside div or p

开发者 https://www.devze.com 2023-04-11 08:16 出处:网络
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 Firefo

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号