Can anyone help me: make iframe = contenteditable

JavaScript
#1

How to make iframe contenteditable ?
‘ondblclick="frameToDiv()’ not working either , perhaps because iFrame isnt working .
How can I fix this:

<!DOCTYPE html>
<html>
  <body contenteditable="true" >

    <div id="input"  ondblclick="divToFrame()" contenteditable="true" 
      style="float:left; width: 400px; height: 400px; border: 2px solid green;">
      Edit content here. Double-click to view content in the iframe.
    </div>
 
    <p>
 <iframe id="output"  ondblclick="frameToDiv()"   contenteditable="true"
     style="display:inline-block; width:400px; height:400px; border: 2px solid red;">
 </iframe>
   </p> 


<script>

    function frameToDiv() {
     console.log("function frameToDiv()")
  
    }
  
    function divToFrame() {
      console.log("function divToFrame()")
      let data = document.getElementById("input").innerHTML;
      let iframeDoc =  document.getElementById("output").contentDocument;
      iframeDoc.documentElement.innerHTML = data;
    }
  </script>
  </body>
</html>

Thanks

#2

Hi @vmars316, you can’t make the iframe itself contentEditable but only some element inside it (such as the body) – same for user event listeners. So this will work:

const input = document.getElementById('input')
const output = document.getElementById('output')
const outputBody = output.contentDocument.body

input.contentEditable = true
input.addEventListener('dblclick', divToFrame)

outputBody.contentEditable = true
outputBody.addEventListener('dblclick', frameToDiv)

function frameToDiv () {
  input.innerHTML = outputBody.innerHTML
}

function divToFrame () {
  outputBody.innerHTML = input.innerHTML
}

Here’s a fiddle.

#3

Very Cool…
Thank you very much !

1 Like
#4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.