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);

}

$（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');
    }
  });

}）;

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一个新的内容窗口，但也许别人可以在此基础上建立。

Answer 2

在修改设计模式之前，似乎添加了一个带有setTimeout的小延迟。这是唯一的解决方案吗？好奇。

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

2 个答案: