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



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

相关内容

  • 没有找到相关文章

最新更新