使用下面的代码,我可以成功地在
注意: 我不希望在按钮点击时添加
使用
contenteditable
div中输入文本,并且在按下回车键时,它不会创建新的div
,而是创建<br>
。如何在contentedtiable
div内的文本周围添加<p>
标签?
$('button').click(function() {
$('pre').text($('div')[0].outerHTML)
});
$('div[contenteditable=true]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode == 13) {
// insert 2 br tags (if only one br tag is inserted the cursor won't go to the second line)
document.execCommand('insertHTML', false, '<br><br>');
// prevent the default behaviour of return key pressed
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 50px; border: 1px solid;" contenteditable="true"></div>
<pre></pre>
<button>Show Source</button>
我希望从上述脚本中得到的输出如下:
<div contenteditable="true">
<p>
// content here
</p>
</div>
注意: 我不希望在按钮点击时添加
标签,而是自动发生。
使用
$('div[contenteditable=true]').wrapInner('<p></p>');
会在文本框中键入内容时,在文本末尾添加标签,如此演示: https://jsfiddle.net/r3qthx6d/3/ 然而,这不是我需要的,因为我的目的是让内容被
标签所包围。
<p>
标签:jsfiddle.net/r3qthx6d/3 - The Codesee<p>
标签之前。 - The Codesee