Question

我正在构建功能以在我的Web应用程序上做笔记。我遇到两个问题：

我不知道如何识别换行符。我可以使用换行符对文本进行加粗，但是当用户单击Edit时，它会在文本上显示<br>，如果他保存了该文本，则只会以纯文本形式显示<br>。

如果用户删除所有文本并单击“保存”，则该文本将不起作用，仅打印<textarea>。

非常感谢您的帮助！

$('#edit').click(function() {
  $('#edit').hide();
  $('#note').each(function() {
    var content = $(this).html();
    $(this).html('<textarea style="width:inherit">' + content + '</textarea>');
  });
  $('#save').show();
});

$('#save').click(function() {
  $('#save').hide();
  $('textarea').each(function() {
    var content = $(this).val(); //.replace(/\n/g,"<br>");
    $(this).html(content);
    $(this).contents().unwrap();
  });
  $('#edit').show();
});

#note {
  word-wrap: break-word;
  max-width: 40rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
  <h5 class="card-tittle">Note</h5>
  <hr>
  <div class="container index">
    <div class="row">
      <div class="jumbotron col-md-12" id="note">
        Test Text.
      </div>
      <div class="col-md-12">
        <button class="btn btn-primary" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</button>
        <button class="btn btn-primary" id="save"><span class="glyphicon glyphicon-save"></span>Save</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我认为您想做这样的事情...

$('#edit').click(function() {
  $('#edit').hide();
  $('#note').each(function() {
    var content = $(this).html().replace(/<br>/g,"\n");
    $(this).html('<textarea style="width:inherit">' + content + '</textarea>');
  });
  $('#save').show();
});

$('#save').click(function() {
  $('#save').hide();
  $('textarea').each(function() {
    var content = $(this).val().replace(/\n/g,"<br>"); //.replace(/\n/g,"<br>");
    $(this).html("");
    $(this).append(content);
    $(this).contents().unwrap();
  });
  $('#edit').show();
});

演示：https://www.codeply.com/go/hAL9pWWUFk

笔记功能，换行符和没有内容

1 个答案: