MENU

分享一个HTML，PHP可视化编程源码

最近看某博客，发现了这个源码，感觉挺有用的，于是搬砖过来，图产品_ECSHOP演示

_ECSHOP演示图产品： 代码如下
1.png
2.png

<！DOCTYPE html>
<HTML>
<HEAD>
<meta charset =“ utf-8”>
<TITLE> HTML可视化编程</ 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>
<！-[如果是IE 9]>
<script src =“ // cdn.bootcss.com/html5shiv/r29/html5.min.js”> </ script>
<！[ENDIF]  - >
</ HEAD>
<BODY>
<风格>
body {min-height：150px; padding-top：90px; background：＃f6f6f6;}。container {width：98％; padding-right：15px; padding-left：15px; margin-right：auto; margin-left：自动} .CodeMirror {最小高度：150像素} #textareaCode {最小高度：150像素} #iframeResult {边界：0重要;最小宽度：100px的;宽度：100％;最小高度：150像素;背景色： #fff} @media屏幕和（最大宽度：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（http://cdn.weilaicloudy.com/images/bin_bgi/F56E1D3C-1CA9-4DAF-90B7-127C4D0232CB.png）; background-repeat：no-重复;文本缩进：-9999px;宽度：160像素;高度：39px;边距：10px的;显示：块}
</样式>
<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="http://weilaicloudy.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>
<页脚>
<div class =“ row”>
<div class =“ col-lg-12”> <hr>
<p> Copyright2019 <a target="_blank" href="//weilaicloudy.com/">未来技术博客</a> </ p>
</ DIV>
</ DIV>
</页脚>
</ DIV>
<SCRIPT>
var mixedMode = {
名称：“ htmlmixed”，
scriptTypes：[{匹配项：/ \ / x-handlebars-template | \ / x-mustache / i，
模式：null}，
{matches：/（text | application）\ /（x-）？vb（a | script）/ i，
模式：“ vbscript”}]
};
var editor = CodeMirror.fromTextArea（document.getElementById（“ textareaCode”），{
模式：mixedMode，
selectionPointer：是的，
lineNumbers：否，
matchBrackets：是的，
indentUnit：4
indentWithTabs：是
}）;
window.addEventListener（“ resize”，autodivheight）;
var x = 0;
函数autodivheight（）{
var winHeight = 0;
如果（window.innerHeight）{
winHeight = window.innerHeight;
} else if（（（document.body）&&（document.body.clientHeight））{
winHeight = document.body.clientHeight;
}
//通过深入文献内部对身体进行检测，获取浏览器窗口高度
如果（document.documentElement && document.documentElement.clientHeight）{
winHeight = document.documentElement.clientHeight;
}
高度= winHeight * 0.3
editor.setSize（'100％'，height）;
document.getElementById（“ iframeResult”）。style.height =高度+“ px”;
}
函数commitTryit（）{
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>'+基本路径+'</ head>'）;
}否则，如果（array_matches_body）{
texttext = text.replace（'<body>'，'<body>'+ basepath）;
}其他{
文字=基本路径+文字;
}
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（文本）;
ifrw.document.close（）;
autodivheight（）;
}
submitTryit（）;
autodivheight（）;
</ SCRIPT>
</ DIV> </ BODY>
</ HTML>

> 此篇文章【分享一个HTML，PHP可视化编程源码】，均来自于网络，贫小子仅作分享

Leave a Comment

0:00