我已经构建了一个将 Markdown 转换为 html的编辑器。现在我必须使用jquery autosize插件来调整文本区域的大小。
如果我使用内容可编辑的 div,我可以绕过它。但内容可编辑 div 的问题在于它不保留新行。每次按下返回键时,它都会插入一个新的 div。这打破了我的应用程序将 markdown 呈现为 html 的问题。
有什么方法可以使内容可编辑的 div 的行为与文本区域完全一样?
我已经构建了一个将 Markdown 转换为 html的编辑器。现在我必须使用jquery autosize插件来调整文本区域的大小。
如果我使用内容可编辑的 div,我可以绕过它。但内容可编辑 div 的问题在于它不保留新行。每次按下返回键时,它都会插入一个新的 div。这打破了我的应用程序将 markdown 呈现为 html 的问题。
有什么方法可以使内容可编辑的 div 的行为与文本区域完全一样?
在寻找答案但没有找到任何完全有效的东西后,我编写了自己的 jQuery 插件。
https://github.com/UziTech/jquery.toTextarea.js
我在输入时使用white-space: pre-wrap;
并插入了“ \n
”。这样我就可以$("div").text()
用来获取文本而不必担心删除标签和格式化<br/>
的
演示:
在上面的 @Mr_Green 评论之后,您应该通过在 contenteditable 上按 Enter 来查看 Make a <br> 而不是 <div></div>
使其正确的JS代码是:
$(function(){
$("#editable")
// make sure br is always the lastChild of contenteditable
.live("keyup mouseup", function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
// use br instead of div div
.live("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
})
;
您可以拦截Enter
按键并将其替换为<br>
Javascript :
$(function(){
$("#editable").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
if (document.selection) {
document.selection.createRange().pasteHTML("<br/>");
} else {
$(this).append("<br/>");
}
}
});
});