javascript写一个前端在线运行环境

2024-06-26 15:19:04 719

在调试一些简单代码时，新配置本地环境比较复杂。所以诞生了想写一个自己的在线运行环境的想法。

原理：

要创建一个类似 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>  
	
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="box"&gt;
		&lt;div class="item"&gt;
			&lt;div&gt;HTML&lt;/div&gt;
			&lt;textarea id="htmlCode" placeholder="输入 HTML 代码..."&gt;&lt;/textarea&gt;
		&lt;/div&gt;
		
		&lt;div class="item"&gt;
			&lt;div&gt;CSS&lt;/div&gt;
		&lt;textarea id="cssCode" placeholder="输入 CSS 代码..."&gt;&lt;/textarea&gt;  
		&lt;/div&gt;
		
		&lt;div class="item"&gt;
			&lt;div&gt;JavaScript&lt;/div&gt;
		&lt;textarea id="jsCode" placeholder="输入 JavaScript 代码..."&gt;&lt;/textarea&gt; 
		&lt;/div&gt;
	&lt;/div&gt;
	

	&lt;button onclick="runCode()"&gt;运行&lt;/button&gt;  
	&lt;iframe id="preview" width="100%" height="500px"&gt;&lt;/iframe&gt;  
			  
	&lt;script&gt;
		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(`&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;${cssCode}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;${htmlCode}&lt;/body&gt;&lt;/html&gt;`);  
			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();  
		}
	&lt;/script&gt;
&lt;/body&gt;

</html>

OBJUI

javascript写一个前端在线运行环境

热门文章:

更多精彩，请关注公众号

热门文章: