jquery - 如何自动实时地将 div 的 HTML 传递到文本区域？

Question

我用编辑器制作了一个简单的项目，具有添加粗体、斜体、h1、h2的基本功能、p 等功能。

所有这些功能都添加到可编辑 div 中编写的文本中

<div id="editor" class="editor"contenteditable></div>

现在我需要传递具有可编辑 div 和 textarea 的所有信息，以便我可以将该信息插入数据库并使用 PHP 进行验证。

我已经完成了以下操作，但它没有显示自动实时写入的内容

http://jsfiddle.net/02fvzn5b/13/

Answer 1

如果你想让它实时更新，你必须给div附加一个事件监听器:

$(function() {
  let htmlDiv = $("#editor");
  htmlDiv.on("keyup", function(e) { // <-- add the html every time it updates
  	$("#textarea").html(htmlDiv.html())
  });
  $("#textarea").html(htmlDiv.html()) // <-- add it once at the beginning
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor" class="editor" contenteditable><span>Hello</span></div>

<!-- The textarea hide, with display none; -->
<textarea id="textarea"></textarea>