使用从<pre></pre>到div的html值

Question

考虑下面的片段。

<div class="original" contenteditable="true">
<pre contenteditable="true">&lt;p class="text-centre">
&lt;/bHello World>&lt;/b>
&lt;/p></pre>
</div>

然后我有另一个div，如下所示

<div class="replace">

</div>

正如您在第一个div中所看到的，我正在使其可编辑，用户可以在其中设置自己的h1, p, tables样式等等，但现在我只是在展示<p>。

我有一个按钮，点击这个按钮，我希望第一个带有类original的div中的original放在带有replace类的第二个div中，但是考虑到样式，上面的<p>应该显示为- Hello World。

使用我的jQuery，我只是替换从一个div到另一个div的值。

<script>
    $(document).ready(function () {
        $('.test').click(function () {
            var replaced = $('.original').html();
            $('.replace').html(replaced);
        });
    });
</script>

Answer 1

要解决这一问题，请使用text()从.original检索值，以便正确编码HTML实体，然后使用html()设置.replace div中的内容，如下所示：

​

$('.test').click(function() {
  var replaced = $('.original').text();
  $('.replace').html(replaced);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="original" contenteditable="true">
  <pre contenteditable="true">&lt;p class="text-centre">
&lt;b&gt;Hello World&lt;/b>
&lt;/p></pre>
</div>

<button class="test">Go</button>

<div class="replace"></div>

​

注意，我修改了pre标记中的HTML，因为它在您的问题中无效。

Answer 2

这可能不适用于所有应用程序，但如果定位不混乱，您可以让div替换和pre位于同一个块或同一个div中，将其设置为display:none，然后添加css : for：

.thingtoclick:focus{
    display:block;
}
.thingtoclick:focus .thingtodisappear{
display:none;
}