7

我已经构建了一个将 Markdown 转换为 html的编辑器。现在我必须使用jquery autosize插件来调整文本区域的大小。

如果我使用内容可编辑的 div,我可以绕过它。但内容可编辑 div 的问题在于它不保留新行。每次按下返回键时,它都会插入一个新的 div。这打破了我的应用程序将 markdown 呈现为 html 的问题。

有什么方法可以使内容可编辑的 div 的行为与文本区域完全一样?

4

2 回答 2

10

在寻找答案但没有找到任何完全有效的东西后,我编写了自己的 jQuery 插件。

https://github.com/UziTech/jquery.toTextarea.js

我在输入时使用white-space: pre-wrap;并插入了“ \n”。这样我就可以$("div").text()用来获取文本而不必担心删除标签和格式化<br/>

演示:

http://jsfiddle.net/UziTech/4msdgjox/

于 2014-12-30T20:48:31.723 回答
2

编辑

在上面的 @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/>");
             }
        }
    });
});
于 2013-05-23T13:48:24.707 回答