How to get reference to Codemirror inside an iframe from parent page?

I have a parent.html page which I have embedded an Iframe inside a div element and the src of iframe refer to a codemirror.html page which displays Code-mirror.

<div id="cmModal" class="modal">
<div class="modal-content">
  <span class="close">&times;</span>
  <iframe id="cmIframeId" name="cmiframe" src="../html/codemirror.html"></iframe>
</div></div>

when I click a button I display a div which contains iframe as a modal block. At this time I would like initialize Code-mirror by calling Code-mirror instance.

How can I initialize CodeMirror content from parent.html?

What I have done and still couldn't initialize codemirror:

Declared a global instants of codemirror and a global function on codemirror.html page.

var codeMirrorEditor; 
window.setCode = function(content) {
    codeMirrorEditor.setValue(content);;
}

Calling those global instants and function from parent.html

 function openCodeMirror(){
            // Get the modal
            var modal = document.getElementById("cmModal");
            modal.style.display = "block";

            var iframe = document.getElementById("cmIframeId");
            iframe.contentWindow.setCode('My initial value');
            iframe.contentWindow.codeMirrorEditor.setValue('My initial value')
        }

codemirror.html

<!doctype html>
<html lang="en">
<head>
    <title>CodeMirror: HTML EDITOR</title>
// all codmirror addons and script comes here ...
</head>
<body>
<div id="code" ></div>

<script>
    var codeMirrorEditor; 
    window.setCode = function(content) {
        codeMirrorEditor.setValue(content);;
    }  

    window.onload = function () {
        codeMirrorEditor = CodeMirror(document.getElementById("code"), {
            mode: "text/html",
            styleActiveLine: true,
            lineNumbers: true,
            lineWrapping: true,
            autoCloseTags: true,
            theme: "night",
            value: getOwnSource(),
        });         
    };

    function setContent(content) {
        codeMirrorEditor.setValue(content);
    }

    function getContent() {
        return codeMirrorEditor.getValue();
    }

    function getOwnSource() {
        return document.documentElement.innerHTML;
    }

</script>

</body>
</html>

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/modal.css">
</head>
<body>

<textarea id="source" style="width:100%; height:400px"> initial text comes from here </textarea><br>
<input type="button" value="open codemirror" onclick="openCodeMirror()"> </input>

<!-- The Codemirror Modal window-->
<div id="cmModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe id="cmIframeId" name="cmiframe" src="../html/codemirror.html" style="width:100%; height:300px"></iframe>
  </div>
</div>

<script>
function openCodeMirror(){
      var modal = document.getElementById("cmModal");
      modal.style.display = "block";

      var iframe = document.getElementById("cmIframeId");
      let textarea = document.getElementById("source");
                
     iframe.contentWindow.codeMirrorEditor.setValue(textarea.value);
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
        modal.style.display = "none";
    }

  }

</script>

</body>
</html>

modal.css for parent.html

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
/*   background-color: #ff8000; */
  background-color:#fefefe ;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  
/*   padding: 10px; */
  border: 1px solid #888;
  width: 100%;
  height:100%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 32px;
  font-weight: bold;
  margin-right: 10px;
/*   border: 1px solid #ff0000; */
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Solution

Guys it works like charm, it was just my mistake mixing code. After cleaning the code it works as it should. Thanks to everyone, may it help someone else to solve other issues.