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>。

我有一个按钮，点击后我希望来自第一个div <p>的{{1}}被放置在第{div}类original中，但是考虑了样式，即上述replace应显示为 - Hello World

使用我的jQuery，我只是将一个div中的值替换为另一个

<p>

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替换为同一个块或同一个div中的pre，将要替换的东西设置为display：none，然后添加css：

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

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

2 个答案: