Call Back Editable Iframes Changes Into Codemirror

http://jsbin.com/aNirEnUB/3/edit I've been experimenting with Codemirror for a bit, and today I decided to make the iframe editable, but haven't figured out a way to call back the

Solution 1:

Via https://developer.mozilla.org/en-US/docs/Web/API/Window.frames

I've next to no experience with codemirror, but raw DOM allows access to iframes using Window.frames[]. If you pull the data back in through dom using .addEventListener("onchange",function), you should be able to work with it.

If this answer isn't specific enough (or out of scope, since I don't know a way to do this inside of your framework), please provide me with what exactly you're trying to pull back, and i'll do some more research.

Solution 2:

http://jsbin.com/aNirEnUB/4/edit

This is the best I've been able to do. I got rid of Codemirror, and used a regular textbox/textarea. I set it all up in a form for easier callbacks. I could not figure out how to callback an onchange or onkeyup event for the iframe. So instead I call it back by toggling the textbox.

window.onload = function() {
  preview.document.designMode = 'On';
  preview.document.execCommand("enableObjectResizing", false, "false");
  preview.document.execCommand("enableInlineTableEditing", false, "false");
};

// Calls code from preview to textboxfunctionsubmit_form() {
  var theForm = document.getElementById("container");
  theForm.elements.code.value = window.frames.preview.document.body.innerHTML;
  theForm.onclick();
}

$(document).ready(function() {
  var code = $('#code'),
    preview = $('[ID$=preview]');

  // Live Debugging
  code.keyup(IntPrev);

  functionIntPrev(e) {
    preview.contents().find('body').html(code.val());
  }

  // Toggle between Designer and Code
  $("#design-n-code").click(function() {
    preview.toggle();
    code.toggle();
  }); code.hide();

});