javascript - jqueryUI 可排序列表项内的 iframe 内容可编辑

Question

我遇到一个问题，当我有一个具有设计模式的富文本字段时，该字段位于可排序的 LI 内。问题是，如果将 LI 拖动到新位置，designMode 会更改为“Off”。即使我能够定位正确的 iframe，但当我告诉它重新打开 designMode 时，它​​似乎会忽略，有人知道为什么会发生这种情况吗？感谢您的阅读。

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

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

}

$(文档).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');
    }
  });

});

Answer 1

这只是部分答案。
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 and Draggable between parent and child frame他在实现可拖动和可排序方面遇到了困难，但最终让它发挥了作用。 我不知道为什么被拖动会给你的 iframe 一个新的 contentWindow，但也许其他人能够在此基础上进行构建。