xx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HTML/CSS/JS 在线工具</title>
<meta name="keywords" content="HTML/CSS/JS 在线工具">
<meta name="description" content="通过 HTML/CSS/JS 在线工具，你可以在线输入 HTML 、CSS、JS 代码，该工具能实时显示运行效果。..">
<script src="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.25.0/codemirror.min.css">
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/css/css.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/javascript/javascript.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/mode/xml/xml.js"></script>
<link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
</head>
<body>
<div class="container"><link rel="stylesheet" href="https://static.runoob.com/assets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/jqwidgets/jqxsplitter.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closetag.min.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/edit/closebrackets.js"></script>
<script src="https://cdn.staticfile.org/codemirror/5.25.0/addon/display/placeholder.js"></script>
<style type="text/css">
.container{
100%;
}
.CodeMirror {
border: 0px solid #fff;
height: auto;
font-size: 14px;
line-height: 18px;
}
/*
.CodeMirror pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: keep-all;
}*/
table td {
word-wrap: break-word;
word-break: break-all;
}
.modal-dialog {
800px;
}
#output {
100%;
height: 100%;
}
#iframeResult {
display:block;
overflow:hidden;
border:0!important;
min-100px;
100%;
height:100%;
background-color:#fff
}
body{
background-color: transparent;
}
</style>
<div class="row" style="padding-top:30px;" id="runoob-content">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline"role="form">
<!-- <button type="button" class="btn btn-warning" id="librep">选择库</button>-->
<button type="button" class="btn btn-warning" id="basehtml">HTML 模板</button>
<div class="form-group">
<select class="form-control" id="sel1">
<option value="nourl" selected="selected">选择库...</option>
<option value="jq">使用 jQuery 2.2.4</option>
<option value="bs">使用 Bootstrap 3.3.7</option>
<option value="ag">使用 Angular 1.6.6</option>
<option value="vue">使用 Vue 2.2.2</option>
<option value="fa">使用 Font Awesome 4.7.0</option>
<option value="more">更多……</option>
</select>
<button type="button" class="btn btn-success" id="runcode">运行</button>
<label>
<input type="checkbox" id="isautorun">自动执行
</label>
</div>
<div class="form-group alert alert-danger" style="display:none;padding: 6px;"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <span> 错误！请进行一些更改。</span></div>
</form>
</div>
<div class="panel-body">
<form role="form" id="compiler-form">
<div id="splitContainer">
<div>
<div id="leftSplitter">
<div>
<textarea placeholder="输入 HTML 代码……" id="code-html" class="form-control" name="code" rows="11"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
HTML
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
<div>
<textarea placeholder="输入 JavaScript 代码……" id="code-js" class="form-control" name="code" rows="10"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
JavaScript
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
</div>
</div>
<div>
<div id="rightSplitter">
<div>
<textarea placeholder="输入 CSS 代码……" id="code-css" class="form-control" rows="11"></textarea>
<a href="javascript:void(0);" class="windowLabel" data-panel="js">
<span class="label">
CSS
</span>
<i class="fa fa-cog">
</i>
</a>
</div>
<div id="output">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
生成链接
</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">标题</span>
<input type="text" id="post_title" class="form-control" placeholder="请输入标题……">
</div><br>
<div class="alert alert-warning">提示！对于发布的内容我们会定期审核，对于违规或错误代码会进行删除处理。</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-success" id="save">
保存代码
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal）扩展库 -->
<div class="modal fade" id="libs" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
扩展库
</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="input-group">
<span class="input-group-addon">输入库名：</span>
<input type="text" class="form-control" id="filter" placeholder="搜索扩展库……">
</div>
<i id="fa-spinner" class="fa fa-spinner fa-pulse fa-3x fa-fw" style="display: none;padding: 10px;"></i>
<table id="libs-table" class="table table-striped"></table>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(document).ready(function () {
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;
}
$(".close").click(function(){
if(parent){
var iframe= parent.window.document.getElementsByTagName("iframe")[0];
if(iframe){
if(iframe.parentNode){
iframe.parentNode.removeChild(iframe)
}
}
}
});
$("#runcode").click(function() {
submitTryit();
}) ;
$("#isautorun").prop( "checked", true );
height = (winHeight - 60) * 0.86;
$('#splitContainer').jqxSplitter({ height: height, '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%' }] });
$('#leftSplitter').jqxSplitter({ height: '100%', '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
$('#rightSplitter').jqxSplitter({ height: '100%', '100%', orientation: 'horizontal', panels: [{ size: '50%' }, { size: '50%'}] });
});
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
autoCloseBrackets:true,
lineWrapping: true,
matchBrackets: true,
autoCloseTags:true
};
// HTML EDITOR
var html_box = document.querySelector('#code-html');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
//var isautorun = $('#isautorun').prop('checked');
html_editor.on('change',function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
}
});
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#code-css');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
css_editor.on('change', function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
}
});
// JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#code-js');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
js_editor.on('change', function (inst, changes) {
if($('#isautorun').prop('checked')) {
submitTryit();
}
});
$("#basehtml").click(function() {
_html_code = ``;
html_editor.getDoc().setValue(_html_code);
});
$("#librep").click(function(){ $("#libs").modal("show"); });
$( "select" ).change(function() {
$( "select option:selected" ).each(function() {
_thisvar = $(this).val();
_inithtmlcode = html_editor.getValue();
if(_thisvar=='more'){
$("#libs").modal("show");
} else if(_thisvar == 'jq') {
_html_script_code = "<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'bs') {
_html_script_code = "<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'ag') {
_html_script_code = "<script src="https://cdn.staticfile.org/angular.js/1.6.6/angular.min.js"></script>
";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'vue') {
_html_script_code = "<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}else if(_thisvar == 'fa') {
_html_script_code = "<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
";
html_editor.getDoc().setValue(_html_script_code + _inithtmlcode);
}
});
});
$('#libs').on('hidden.bs.modal', function () {
$("#sel1 option:first-child").attr('selected', true);
$("#sel1 option:last-child").attr('selected', false);
$("#libs-table tr").removeClass("success");
})
$("#filter").keyup(function() {
_search_value = $(this).val();
$.get('https://api.cdnjs.com/libraries',{search:_search_value},function(data) {
var _val_tr ='';
$("#fa-spinner").show();
$.each(data.results, function(i, item) {
if(i < 10) {
_val_tr += '<tr><td>'+item.name+' </td><td>'+item.latest+'</td><td> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> </td></tr>';
} else {
return false;
};
});
if(_val_tr) {
$("#libs-table").html('<tr><th>库名</th><th>地址</th><th>插入</th></tr>' + _val_tr);
}
$("#fa-spinner").hide();
});
});
$( document ).ajaxComplete(function() {
$("tr").not(':first').hover(
function () {
if(!$(this).hasClass("success")) {
$(this).addClass("warning");
}
},
function () {
$(this).removeClass("warning");
}
);
$("tr").not(':first').click(function() {
if(!$(this).hasClass("success")) {
_editor_content = html_editor.getValue();
$(this).addClass("success")
$(this).removeClass("warning");
_libsrc = $(this).find("td").eq(1).text();
if(_editor_content.indexOf(_libsrc) !== -1 ) {
return;
}
if( _libsrc.indexOf('.js')!==-1 ){
_libsrc = '<script src="'+_libsrc+'"></script>
';
} else if(_libsrc.indexOf('.css')!==-1) {
_libsrc = '<link rel="stylesheet" href="'+_libsrc+'">
';
}
patternBody = /<body[^>]*>((.|[
])*)</body>/im;
array_matches_body = patternBody.exec(_editor_content);
patternHead = /<head[^>]*>((.|[
])*)</head>/im;
array_matches_head = patternHead.exec(_editor_content);
if(array_matches_head) {
_editor_content = _editor_content.replace('</head>', _libsrc + '</head>');
} else if(array_matches_body) {
_editor_content = _editor_content.replace('</body>', _libsrc + '</body>');
} else {
_editor_content = _libsrc + _editor_content;
}
html_editor.getDoc().setValue(_editor_content);
}
});
});
$("#save").click(function() {
post_title = $("#post_title").val().trim();
var isnum = /^d+$/.test(post_title);
var isletter = /^[a-zA-Z]+$/.test(post_title);
if( isnum ) {
alert("请认真填写标题！");
} else if( isletter ) {
alert("加点中文描述，大家更容易理解！");
}else if(post_title=="" || post_title.length<6) {
alert("标题不能为空且不能少于6个字符……");
} else {
var htmlSource = html_editor.getValue(),
cssSource = css_editor.getValue(),
jsSource = js_editor.getValue(),
post_content = '';
if(htmlSource!='' || jsSource!='' || cssSource!='') {
$.post("/savecode.php", {post_title:post_title, html: htmlSource, js: jsSource, css:cssSource,filename: ""}, function(data){
if(data.errno) {
alert(data.msg)
} else {
$("#save").prop('disabled',false);
alert(data.msg)
window.location.href = data.url
}
}, "json");
} else {
alert("请输入你要展示的代码……");
}
}
});
html_editor.setSize('100%','100%');
js_editor.setSize('100%', '100%');
css_editor.setSize('100%','100%');
function submitTryit() {
// 基础模板
var html = html_editor.getValue(),
css = css_editor.getValue(),
js = js_editor.getValue(),
src = html;
if (html) {
var patternHtmlTag = /<html([^>]*)>/im;
var array_matches_html_tag = patternHtmlTag.exec(src);
if (array_matches_html_tag) {
src = src.replace('<html>', '<html ' + array_matches_html_tag[1] + '>');
}
var patternHead = /<head[^>]*>((.|[
])*)</head>/im
var array_matches_head = patternHead.exec(src);
var patternBodyTag = /<body([^>]*)>/im;
var array_matches_body_tag = patternBodyTag.exec(src);
if (array_matches_body_tag) {
src = src.replace('<body>', '<body ' + array_matches_body_tag[1] + '>');
}
}
//console.log(css);
if (css.indexOf('<style>') !== -1) {
$(".alert-danger span").text('CSS 编辑框不需要 <style> 标签');
$(".alert-danger").show().delay(5000).fadeOut();
return;
} else if (js.indexOf('<script>') !== -1) {
$(".alert-danger span").text('JavaScript 编辑框不需要 <script> 标签');
$(".alert-danger").show().delay(5000).fadeOut();
return;
} else {
$(".alert-danger").hide();
}
// CSS
if(css) {
css = '<style>' + css + '</style>';
if (array_matches_head) {
src = src.replace('</head>', css + '</head>');
} else if (array_matches_body_tag) {
src = src.replace('</body>', css + '</body>');
} else {
src += css;
}
}
// Javascript
if(js) {
js = '<script>' + js + '</script>';
if (array_matches_body_tag) {
src = src.replace('</body>', js + '</body>');
}else {
src += js;
}
}
text = src;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("output").innerHTML = "";
document.getElementById("output").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();
window.addEventListener("resize", autodivheight);
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 = height = (winHeight - 60) * 0.86;
document.getElementById("splitContainer").style.height= height +"px";
}
</script>
</div>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
#iframe {
100%;
height: -webkit-fill-available;
height: -moz-fill-available;
height: -moz-available;
height: fill-available;
}
#iframe.fullscreen{
position: fixed;
border:0px solid;
outline:9999px solid rgba(0,0,0,.6);
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
overflow:hidden;
z-index: 100;
background: #000000aa;
}
iframe {
100%;
height: -webkit-fill-available;
height: -moz-fill-available;
height: -moz-available;
height: fill-available;
border: 0;
overflow: hidden;
margin-top: -44px;
}
#close {
background: #E91E63;
color: #eee;
text-shadow: 0 0 0;
border-radius: 12px;
line-height: 20px;
text-align: center;
height: 22px;
22px;
padding: 1px;
margin-top: 22px;
margin-right: 6px;
position: relative;
float: right;
}
/* use cross as close button */
#close::before {
content: "2756";
}
$(function(){
openIframe(hugo.iframes[0],$("#iframe")[0]);
$("#iframe").prepend("<button id='close'></button>")
$("#close").click(function(){
$("#iframe").toggleClass('fullscreen')
})
})