demo源码下载:点击下载
HTML代码(index.html):
注:代码编撰区域使用开源项目 ACE (Ajax.org Cloud9 Editor) 实现
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PHP在线代码编辑器</title> <script src="./ace-build/ace.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> html, body { height: 100%; } * { margin: 0px; padding: 0px; } #main { height: calc(100% - 50px); } #editor, #wall, #result { width: calc(50% - 30px); height: 100%; font-size: 14px; float: left; } #wall { width: 30px; background-color: #FBF1D3; } #result { height: calc(100% - 10px); padding: 5px; overflow-y: auto; } #header, #header-left, #header-right { height: 50px; line-height: 50px; background-color: #FBF1D3; float: left; } #header { width: 100%; } #header-left { width: 50%; font-size: 18px; text-align: center; } #btn { padding: 3px 5px; margin: 10px 30px 5px 0; line-height: 17px; cursor: pointer; float: right; } </style> </head> <body> <div id="header"> <div id="header-left"> XMSB — PHP在线代码运行工具 <button type="button" id="btn">执行代码 [RUN]</button> </div> </div> <div id="main"> <div id="editor"></div> <div id="wall"></div> <div id="result"></div> </div> <script type="text/javascript"> var editor = ace.edit("editor"); editor.setTheme("ace/theme/solarized_light"); editor.session.setMode("ace/mode/php"); editor.setValue("<?php \n\t$xmsb = \'PHP在线代码运行工具\';\n\techo $xmsb;", 1); </script> <script type="text/javascript"> var btn = document.getElementById(\'btn\'); btn.onclick = function() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject(\'Microsoft.XMLHTTP\'); } xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById(\'result\').innerHTML = xhr.response; } } xhr.open(\'POST\', `run.php`, true); xhr.setRequestHeader(\'Content-Type\', \'application/x-www-form-urlencoded\'); xhr.send(\'code=\' + editor.getValue()); } </script> </body> </html>
PHP代码(run.php):
<?php ini_set(\'display_errors\', 0); ini_set(\'xdebug.overload_var_dump\', \'1\'); error_reporting(E_ALL); set_error_handler(\'handle_error\'); set_exception_handler(\'handle_exception\'); register_shutdown_function(\'shutdown_function\'); function handle_error($error_level, $error_message, $error_file, $error_line, $error_context) { ob_end_clean(); echo "[第" . $error_line . "行] " . "发生错误:" . $error_message; die(); } function handle_exception($exception) { ob_end_clean(); echo "[第" . $exception -> getLine() . "行] " . "发生错误:" . $exception -> getMessage(); die(); } function shutdown_function() { $error = error_get_last(); if(!empty($error)) { ob_end_clean(); echo "[第" . $error[\'line\'] . "行] " . "发生错误:" . $error[\'message\']; die(); } } if(!empty($_POST)) { $code = trim($_POST[\'code\'], "<?php"); ob_start(); eval($code); $output = ob_get_contents(); ob_end_clean(); echo $output; }