document.designModeで文書を編集可にする

designModeを'on'にするとiframe内の文書を編集できるようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <script>
    function setEditable( editable ) {

      // designModeをonにすると編集ができるようになる。
      var iframe = document.getElementById("iframe")
      iframe.contentDocument.designMode= editable ? 'on' : 'off'
        
      document.getElementById("true").style.display = editable ? "none" : "block";
      document.getElementById("false").style.display = !editable ? "none" : "block";
    }
    function onLoad(){
      setEditable(true);
    }
  </script>
  <body onload="onLoad();">
      <iframe id="iframe"  src="./content.html" ></iframe>
      <div>
        <a id="true"  href="javascript:setEditable(true)">編集可にする</a>
        <a id="false"  href="javascript:setEditable(false)">編集不可にする</a>
      </div>
  </body>
</html>