![图片[1]-在线可视化编辑代码HTML/PHP实现单页可视化源码-轻刻年轮](https://img.ly522.com/LY/uploads/2019/09/2744.png?x-oss-process=image/quality,q_99/resize,m_fill,w_800,h_444?x-oss-process=image/auto-orient,1/quality,q_90/format,webp)
新建一个文件，可html,php后缀，复制下面代码保存上传网站空间。
在线修改代码，源码只有一个html，其它外链都是Bootstrap的。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线可视化编辑- 记磊</title>
<link rel="shortcut icon" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/codemirror/5.2.0/codemirror.min.css">
<script src="//cdn.bootcss.com/codemirror/5.2.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.2.0/mode/css/css.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.2.0/mode/xml/xml.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closetag.min.js"></script>
<script src="//cdn.bootcss.com/codemirror/5.2.0/addon/edit/closebrackets.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
</head>
<body>
<style>
body{min-height:150px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:150px}#textareaCode{min-height:150px}#iframeResult{border:0!important;min-width:100px;width:100%;min-height:150px;background-color:#fff}@media screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px}#iframeResult{display: block;overflow: hidden;height:300px}.form-inline{padding:6px 0 2px 0}}.logo h1{background-image:url(https://tools.ly522.com/images/KAAG6G7ljI.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block}
</style>
<nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;">
<div class="container">
<div class="navbar-header logo">
<h1> <a class="navbar-brand" target="_blank" href="https://www.ly522.com" style="color: #ff0000;">LY522</a></h1>
</div>
</div>
</nav>
<div class="container" >
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-default">源代码：</button>
</div>
<div class="col-xs-6 text-right">
<button type="button" class="btn btn-success" onclick="submitTryit()" id="submitBTN"><span class="glyphicon glyphicon-send"></span> 点击运行</button>
</div>
</div>
</form>
</div>
<div class="panel-body">
<textarea class="form-control" id="textareaCode" name="textareaCode">
在线可视化编辑支持外链，支持html,php等
</textarea>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading"><form class="form-inline"> <button type="button" class="btn btn-default">运行结果</button></form></div>
<div class="panel-body"><div id="iframewrapper"></div></div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12"><hr>
<p>Copyright2019<a target="_blank" href="//ly522.com/">记磊博客</a></p>
</div>
</div>
</footer>
</div>
<script>
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
mode: mixedMode,
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
window.addEventListener("resize", autodivheight);
var x = 0;
function autodivheight(){
var winHeight=0;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight;
}
height = winHeight*0.3
editor.setSize('100%', height);
document.getElementById("iframeResult").style.height= height + "px";
}
function submitTryit() {
var text = editor.getValue();
var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
var array_matches_head = patternHead.exec(text);
var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var array_matches_body = patternBody.exec(text);
var basepath_flag = 0;
var basepath = '';
if(basepath_flag) {
basepath = '<base href="//www.runoob.com/try/demo_source/" target="_blank">';
}
if(array_matches_head) {
texttext = text.replace('<head>', '<head>' + basepath );
} else if (patternHtml) {
texttext = text.replace('<html>', '<head>' + basepath + '</head>');
} else if (array_matches_body) {
texttext = text.replace('<body>', '<body>' + basepath );
} else {
text = basepath + text;
}
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
autodivheight();
}
submitTryit();
autodivheight();
</script>
</div></body>
</html>
© 版权声明
THE END
![表情[qiaoda]-轻刻年轮](https://www.ly522.com/wp-content/themes/zibll/img/smilies/qiaoda.gif)
666
![表情[qiang]-轻刻年轮](https://www.ly522.com/wp-content/themes/zibll/img/smilies/qiang.gif)
暂无评论内容