在 jqueryUI 可排序列表项中的 iframe 内容可编辑答案

【问题标题】：iframe content editable that is within a jqueryUI sortable list item在 jqueryUI 可排序列表项中的 iframe 内容可编辑
【发布时间】：2016-07-18 20:43:05
【问题描述】：

我遇到了一个问题，当我有一个具有设计模式的富文本字段位于可排序的 LI 中时。问题是如果将 LI 拖到新位置，designMode 会变为“关闭”。即使我能够定位正确的 iframe，当我告诉它重新打开 designMode 时它似乎忽略了，有谁知道为什么会这样？感谢您的阅读。

编辑：jfiddle 示例：https://jsfiddle.net/LcLfaa8j/2/

function getRichTextField( itemId ) {
  console.log('get rich text field');
  return document.getElementById('rtf-iframe-' + itemId);

}

$(document).ready(function() {

getRichTextField("sort-textItem-1").contentWindow.document.designMode = "On";

getRichTextField("sort-textItem-2").contentWindow.document.designMode = "On";

$("#text-areas").sortable({
    axis: 'y',
    opacity: 0.8,
    tollerence: 'pointer',
    update: function(event, ui) {
      var order = $(this).sortable( "serialize", { key: "order" } );
      console.log("New Order = " + order);

      console.log('the iframe that was moved designMode is now Off...');

      var richText = getRichTextField($(this).data().uiSortable.currentItem.attr('id'));

      console.log('TEST: the current is ' + $(this).data().uiSortable.currentItem.attr('id') + ' and designMode = ' + richText.contentWindow.document.designMode + ' doubleCheckOfRTFid = ' + $(richText).attr('id') + ' class = ' + $(richText).attr('class'));

        richText.contentWindow.document.designMode = "On"; 

        console.log('just attempted to turn designMode back on... but it gets ignored');
    }
  });

});

【问题讨论】：

我可以自信地说没有人知道发生了什么。对于模糊的问题，您无法获得有用的、具体的答案。您需要包括显示问题的示例；没有人会来为你做所有的跑腿工作。
感谢您的提醒，目前正在研究一个示例以发布。
jsfiddle.net/LcLfaa8j/2 我创建了一个小例子，其中有两个 iframe 开启了 designMode，它们所在的 LI 是可排序的，请尝试重新排序它们并注意只有您单击的那个的 designMode拖动到新位置会关闭它的设计模式，我尝试重新打开它失败。

标签： javascript html iframe designmode

【解决方案1】：

这只是部分答案。
设计模式没有关闭；默认情况下它是关闭的，当您拖动它时，您设置.designMode="on" 的文档会被删除（然后从头开始重新创建）。您可以看到，如果您将内容放入其中一个文档中，然后将其拖动，则内容消失了。看起来 iframe 正在获得一个新的 .contentWindow，这意味着它也有一个不同的子文档。
您可以通过运行在检查器中看到这一点

var before = getRichTextField("sort-textItem-2");
var beforecontentWindow=before.contentWindow;

（现在拖动第二个 iframe）
现在运行：

var after = getRichTextField("sort-textItem-2");
var aftercontentWindow=after.contentWindow;

现在将引用与===进行比较：

before === after ;//returns true because iframe is the same
beforecontentWindow === aftercontentWindow ;//returns false because .contentWindow changed

另见这篇帖子Jquery Sortable and Draggable between parent and child frame，他在实现可拖动和可排序时遇到了麻烦，但最终让它工作了。我不知道为什么被拖动会给你的 iframe 一个新的 contentWindow，但也许其他人可以在此基础上进行构建。

【讨论】：

【解决方案2】：

似乎在重新打开 designMode 之前使用 setTimeout 添加一个小延迟可以解决此问题。这是唯一的解决方案吗？只是好奇。

【讨论】：