我遇到了一个问题,当我有一个启用了设计模式的富文本字段时,该字段位于可排序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的小延迟来修复此问题。这是唯一的解决方案吗?只是好奇。