转载来源 https://www.cnblogs.com/XiaoMingBlingBling/p/14651830.html
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; }