iframe内容可编辑，位于jqueryUI可排序列表项中

iframe content editable that is within a jqueryUI sortable list item

本文关键字：列表 排序 jqueryUI 编辑 iframe 位于      更新时间：2023-10-04

我遇到了一个问题，当我有一个启用了设计模式的富文本字段时，该字段位于可排序LI内。问题是，如果LI被拖到新位置，designMode将变为"Off"。尽管我能够针对正确的iframe，但当我告诉它重新打开designMode时，它似乎忽略了，有人知道为什么会发生这种情况吗？感谢您的阅读。

edit: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');
    }
  });

})；

这只是部分答案
designMode未关闭；默认情况下，它是关闭的，当您拖动设置.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和Draggable在父框架和子框架之间，他在实现可拖动和可排序时遇到了困难，但最终还是成功了。我不知道为什么被拖动会给你的iframe一个新的contentWindow，但也许其他人可以在此基础上构建。

在重新打开designMode之前，似乎添加了一个带有setTimeout的小延迟来修复此问题。这是唯一的解决方案吗？只是好奇。

相关文章：