个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试制作一个 HTML 代码播放器，您可以在其中输入 html 并在 iframe 中获取结果。如果我只使用 textarea 并在 iframe 中输出，效果会很好。但如果我使用代码镜像并尝试将 coremirror 值放入 iframe 中，它会在 iframe 中显示代码，而不是显示结果。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="codemirror/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">
<script src="codemirror/codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/codemirror/mode/css/css.js"></script>
<script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html><body><h1>Helloworld</h1></body></html>",
mode: "css",
theme: "neo",
extraKeys: {"Ctrl-Space": "autocomplete"}
});
$("button").click(function(){
$("iframe").contents().find("body").html($("#codeeditor").html());
})
</script>
</body>
</html>
最佳答案
不要使用 jQuery 获取编辑器内容，而是使用 codemirror 方法 getValue，如下所示:
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})
关于javascript - 如何在iframe中输出codemirror的结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48071160/
28
4
0
我是一名优秀的程序员,十分优秀！