iframe content editable that is within a jqueryUI sortable list item

Question

I am having an issue where when I have a rich text field that has design mode on that is within a sortable LI. The problem is that designMode changes to 'Off' if the LI is dragged to a new position. And even though I am able to target the correct iframe, it seems to ignore when I tell it to turn designMode back on, does anyone know why this is happening? Thank you for reading.

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

});

I can confidently say that nobody knows what's happening. You can't get useful, specific answers to vague questions. You need to include examples that show the problem; nobody's going to come and do all the legwork for you. — LinuxDisciple, Mar 30 '16 at 17:39
appreciate the heads up, working on an example at the moment to post. — RON2015, Mar 30 '16 at 17:43
https://jsfiddle.net/LcLfaa8j/2/ I have created a small example that has two iframes with designMode on, the LI that they are within are sortable, please try re-sorting them and notice that designMode of only the one you clicked to drag to a new position gets it's designMode turned off, and my attempt to turn it back on fails. — RON2015, Mar 30 '16 at 18:01

score 1 · Answer 1 · edited May 23 '17 at 11:59

This is only a partial answer.
The designMode isn't getting turned off; it's off by default, and the document where you set .designMode="on" gets deleted (and then recreated from scratch) when you drag it. You can see that if you put content into one of the documents and then drag it, the content disappears. Looks like the iframe is getting a new .contentWindow, which means it has a different child document too.
You can see this in the inspector by running

var before = getRichTextField("sort-textItem-2");
var beforecontentWindow=before.contentWindow;

(now drag the second iframe)
Now run:

var after = getRichTextField("sort-textItem-2");
var aftercontentWindow=after.contentWindow;

Now compare the references with ===:

before === after ;//returns true because iframe is the same
beforecontentWindow === aftercontentWindow ;//returns false because .contentWindow changed

Also see this post Jquery Sortable and Draggable between parent and child frame where he had trouble implementing draggable and sortable, but got it working eventually. I don't know why being dragged would give your iframe a new contentWindow, but maybe someone else will be able to build on this.

score 0 · Answer 2 · answered Mar 30 '16 at 18:11

0

It seems like adding a small delay with a setTimeout before turning designMode back on fixes this. Is this the only solution? Just curious.

answered Mar 30 '16 at 18:11

RON2015

443
3
16

iframe content editable that is within a jqueryUI sortable list item

2 Answers2