如何在每行的内容可编辑 Div 中换行文本

Question

我想了解是否可以将文本包装在内容可编辑的 div 中。

例如，如果用户使用标记来键入

### MY TITLE

我能以某种方式解析该行并创建另一个输出的 div

<b>MY TITLE<b>

我创建了一个 jsfiddle 来观察输出，但我没有看到太多信息告诉我一行 ENDS 在哪里放置结束标记。此外，按几次返回键后输出看起来很奇怪。它似乎很难使用，我希望有更好的指示器来指示用户输入的内容。

"
        ### test 
        <div><br></div>"

https://jsfiddle.net/rn2camL4/1/

Answer 1

如果我理解正确，您只想在输出周围放置粗体标记，如果是这样，您可以通过简单的连接来完成。

我把你的 jsfiddle 带到了下面的 sn-p 中，请运行它以查看它的运行情况。

当你console.log(boldHtml)时，你会看到包裹在中的输出.

$('#editable').on('keydown', function(e) {
  let html = $(this).html();
  //concatenate bold tags around your html and declare new boldHtml variable
  let boldHtml = '<b>' + html + '</b>'
  $('#render').html(boldHtml) // replace test with <b>test</b>
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
  ### test
</div>

<div id='render'>

</div>