javascript - 复制 $ ('div' ).html() 期待一些特定的文本

Question

基本上我必须将 div 的内容复制到 textarea，能够在 textarea 中编辑它，并且更改应该保存在初始 div 中。

我需要阻止一个看起来像 data-bind: "some stuff;" 的属性，并且可以为 initial wrapper div 的子元素 和注释设置不显示在文本区域内。

这是我目前所知道的，遗憾的是不知道如何在获取 html 时排除文本。 https://jsfiddle.net/2kduy9vp/112/

$('.editor').html($('.main').html());

$('.editor').on('input propertychange', function(){
	$('.main').html($(this).val());
});

.editor {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>

<textarea class="editor"></textarea>

Answer 1

为什么不简单地使用一个 div 并使用 contenteditable="true" 使其可编辑，您可以应用任何样式来显示您想要的内容:

$('.editor').html($('.main').html());

$('.editor').on('input propertychange', function() {
  $('.main').html($(this).html());
});

.editor {
  margin-top: 20px;
  ;
  width: 100%;
  height: 500px;
  padding: 50px;
}

.editor>div {
  background: #fff!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me-too" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>

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