在调试一些简单代码时，新配置本地环境比较复杂。所以诞生了想写一个自己的在线运行环境的想法。
原理：
要创建一个类似 CodePen 的在线代码编辑器，你需要考虑多个组件和功能。以下是一个简化的概述，说明如何使用 JavaScript、HTML 和 CSS 来实现这样的功能：
HTML 结构：
- 编辑器区域（HTML、CSS、JavaScript 文本框）
- 运行/预览区域（iframe 或其他 DOM 元素）
- 控制按钮（如运行、重置等）
JavaScript 功能：
- 监听编辑器区域的变化
- 实现运行功能，将代码注入到预览区域
- 处理可能的错误和安全性问题
CSS 样式：
- 美化界面
- 确保编辑器区域和预览区域的大小和位置合适
以下是一个简单是实现示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/codemirror/6.65.7/codemirror.min.css" rel="stylesheet">
<style>
.box{
display: flex;
flex-direction: row;
}
.CodeMirror{
width:600px !important;
min-height: 300px !important;
margin-right: 20px !important;
border: 1px solid #dedede;
}
.box .item{
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<div>HTML</div>
<textarea id="htmlCode" placeholder="输入 HTML 代码..."></textarea>
</div>
<div class="item">
<div>CSS</div>
<textarea id="cssCode" placeholder="输入 CSS 代码..."></textarea>
</div>
<div class="item">
<div>JavaScript</div>
<textarea id="jsCode" placeholder="输入 JavaScript 代码..."></textarea>
</div>
</div>
<button onclick="runCode()">运行</button>
<iframe id="preview" width="100%" height="500px"></iframe>
<script>
let jsTextarea = document.getElementById('jsCode');
let jsEditor = CodeMirror.fromTextArea(jsTextarea, {
mode: 'javascript', // 编辑器语言
theme: 'idea', // 编辑器主题
line: true, // 显示函数
extraKeys: {"Ctrl": "autocomplete"}, // ctrl可以弹出选择项
lineNumbers: true // 显示行号
});
let htmlTextarea = document.getElementById('htmlCode');
let htmlEditor = CodeMirror.fromTextArea(htmlTextarea, {
mode: 'html', // 编辑器语言
theme: 'monokai', // 编辑器主题
extraKeys: {"Ctrl": "autocomplete"}, // ctrl可以弹出选择项
lineNumbers: true // 显示行号
});
let cssTextarea = document.getElementById('cssCode');
let cssEditor = CodeMirror.fromTextArea(cssTextarea, {
mode: 'css', // 编辑器语言
theme: 'monokai', // 编辑器主题
extraKeys: {"Ctrl": "autocomplete"}, // ctrl可以弹出选择项
lineNumbers: true // 显示行号
});
function runCode() {
// 获取编辑器中的代码
const htmlCode = htmlEditor.getValue();
const cssCode = cssEditor.getValue();
const jsCode = jsEditor.getValue();
// 将代码注入到预览区域
const previewFrame = document.getElementById('preview');
previewFrame.contentWindow.document.open();
previewFrame.contentWindow.document.write(`<!DOCTYPE html><html><head><style>${cssCode}</style></head><body>${htmlCode}</body></html>`);
let script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.textContent = jsCode;
previewFrame.contentWindow.document.body.appendChild(script);
previewFrame.contentWindow.document.close();
}
</script>
</body>
</html>
评论: