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{

	width: 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  {

	width: 800px;

}

#output {

	width: 100%;

	height: 100%;

}

#iframeResult {

	display:block;

	overflow:hidden;

	border:0!important;

	min-width:100px;

	width: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">

                  &times;

            </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">

                  &times;

            </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, width: '100%', orientation: 'vertical', panels: [{ size: '50%' }, { size: '50%' }] });

    $('#leftSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: 'horizontal',  panels: [{ size: '50%' }, { size: '50%'}] });

    $('#rightSplitter').jqxSplitter({ height: '100%', width: '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>\n";

				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\">\n<script src=\"https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js\"><\/script>\n<script src=\"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js\"><\/script>\n";

				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>\n";

				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>\n";

				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\">\n";

				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>&nbsp;&nbsp;<i class="fa fa-paper-plane-o" aria-hidden="true"></i>&nbsp;&nbsp;</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>\n';

				} else if(_libsrc.indexOf('.css')!==-1) {

					_libsrc = '<link rel="stylesheet" href="'+_libsrc+'">\n';

				} 

				patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;

				array_matches_body = patternBody.exec(_editor_content);

				patternHead = /<head[^>]*>((.|[\n\r])*)<\/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[^>]*>((.|[\n\r])*)<\/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 {

    width: 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 {

    width: 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;

    width: 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')

})

})

最新文章

  1. CSS3之让背景图片全部显示
  2. BZOJ3825 : [Usaco2014 Nov]Marathon
  3. 网络传输速度bps与下载文件所需时间的换算
  4. [Objective-c 基础 - 3.4] protocol
  5. maya 操作自我整理（二）
  6. 【Win 10 应用开发】UI Composition 札记（五）：灯光
  7. 分布式改造剧集2---DIY分布式锁
  8. JS的splice()方法在for循环中使用可能会遇到的坑
  9. Coroutine的原理以及实现
  10. css3 曲线阴影，翘边阴影
  11. forward 和redirect
  12. python专题 --- 递归
  13. [转]js版的md5()
  14. C#中类为什么要实例化
  15. Python 读取WAV文件并绘制波形图
  16. CIFAR-10与ImageNet图像识别
  17. PHP中cookie思维导图
  18. oracle创建数据库步骤
  19. idea spring-boot gradle mybatis 搭建开发环境
  20. Spring Boot系列学习文章(一) -- Intellij IDEA 搭建Spring Boot项目

热门文章

  1. 开发中常用的sql语句二
  2. 在android开发中如何使用JavaMail程序
  3. Makedown语法说明
  4. Leetcode back(215) to be continue
  5. python 网址
  6. http长链接
  7. F​l​a​s​h​ ​M​e​d​i​a​ ​L​i​v​e​ ​E​n​c​o​d​e​r​参​数​表
  8. Hive 常用命令和语句
  9. OnCollisionEnter和OnTriggerEnter
  10. 文本编辑器Vim技巧