I want to load codemirror js editor into an iframe to avoid styles overriding. I read the document https://codemirror.net/doc/manual.html#config but it is not clear. Here is what i am tried.
HTML
<iframe id="code"></iframe>
Js
var codemirror = CodeMirror(document.getElementById("code").contentWindow.document.body, {
mode: "javascript",
theme: "monokai"
});
How can I load codemirror js editor into an iframe?
On
If you want to have CodeMirror in an iframe, you will need two different html files. See a very simple example below. Please be a little bit more specific for further requirements.
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div>
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
main.html
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
Place below code in your html markup.