转载来源 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;
}
标签：在线,header,100%,height,代码运行,xhr,editor,PHP From： https://www.cnblogs.com/yisuo/p/17278224.html