使用 contentEditable="true" 编辑 iframe 内的元素答案

【问题标题】：Edit elements inside iframe with contentEditable="true"使用 contentEditable="true" 编辑 iframe 内的元素
【发布时间】：2013-11-27 01:44:26
【问题描述】：

我的 html 代码中有一个像这样的 iframe。

<div>
  <iframe src="demo.html"></iframe>
</div>

demo.html 包含一些带有 contentEditable="true" 属性的标签，如下所示。

<div>
  <p contentEditable="true">bla bla bla bla bla</p>
  .
  .
  .
</div>

当我单独打开 demo.html 文件时，我可以毫无问题地编辑 p 标签，但是当我打开包含 iframe 的 html 文件时，我无法编辑段落。

请您知道如何解决此问题。

谢谢

【问题讨论】：

标签： html iframe contenteditable

【解决方案1】：

通常我会看到 contentEditable div 或 iframe。如果你知道的话，我也想知道更多。

【讨论】：

【解决方案2】：

<!-- /enabled jayscript/ -->

<div>
  <!-- .load demo.html content -->
  <iframe src="demo.html" style="">You do not support iframes...</iframe>
</div>

<!-- Below is code in demo.html 
      .modify demo.html content -->
<br><br><b>Demo.html</b><br>
<div contenteditable="true">
  Blah blah blah  
</div>

<!-- \enabled jayscript\ -->

这在现代 Chrome 中似乎对我有用。只要确保在 div 标签上使用 contenteditable 属性，如果这不起作用，还要设置 iframe 的尺寸。在这个例子中，我还使用了一个我一直在创建的名为 jayscript 的库，所以请原谅那些用于此目的的 cmets。尽管如此，在没有 jayscript 的情况下测试和工作......如果这仍然不适合你，我不知道你的问题是什么（需要更具体）..

【讨论】：

另外，我没有可以放入 iframe 的 demo.html，所以我的 sn-p 将它们分开显示。