#HTML##工具#Web在线编辑器

学习HTML的过程中，我们经常会接触到

  1. W3School：http://www.w3school.com.cn/
  2. 菜鸟教程：http://www.runoob.com/


这两个实用的HTML在线教程网站，里面提供了丰富的文档和Demo，同时还为我们提供了实用的HTML在线编辑工具：

W3School在线测试工具 V2
HTML/CSS/JS 在线工具|菜鸟工具

使我们能够非常方便的在线编程，快速测试代码、了解每个属性的用法，在这两个在线编辑器的陪伴下，我学习了HTML、CSS、Java Script、jQuery，和这两款在线编辑器结下了紧密的联系。当我还在学习HTML的时候，我就幻想着自己开发一个这样的在线编辑器，在庞大的前端知识的驱动下，我已经想到了编写的方法，于是在2018年12月22的夜晚我开了这个坑，一开始只能实现HTML代码提交后渲染成页面，经过后来不断的完善中，现在已经能够实现显示行号、实时刷新渲染、添加扩展库、制表符的插入。

当然现在仍然存在一定的不足，比如代码高亮、更多扩展库的支持暂时还得不到解决。并且没有得到很好的测试，可能还存在一定的bug。我将会继续完善它，将兴趣发挥到极致。Life is fantastic.

…………文章尚未撰写完，仅供参考…………

index.html

<!doctype html>
<!--
  ____  _  _                  _
 | ___|| || |__  ____ ___   _(_) ___ _ __        ___ _ __
 |___ \| || |\ \/ / _` \ \ / / |/ _ \ '__|      / __| '_ \
  ___) |__   _>  < (_| |\ V /| |  __/ |     _  | (__| | | |
 |____/   |_|/_/\_\__,_| \_/ |_|\___|_|    (_)  \___|_| |_|

 -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="https://www.54xavier.cn/wp-content/uploads/2018/05/logo.png">
<script src="https://img.54xavier.cn/jquery.js" type="text/javascript"></script>
<!-- 导入自定义 CSS 文件 -->
<link rel="stylesheet" href="css/style.css">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://img.54xavier.cn/bootstrap.min.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://img.54xavier.cn/bootstrap.min.js"></script>
<!-- 导入自定义 js 文件 -->
<script src="js/script.main.js"></script>
<script src="js/script.js"></script>
<title>Xavier's HTML Edit</title>
</head>

<body>
	<!--Header-->
	<div class="page-header">
		<h1>Xavier's HTML Edit</h1>
	</div>
	<!--END Header-->
	<div class="panel panel-default">
		<!--Buttons-->
		<div class="submitbtn">
			<button type="button" id="send" class="btn btn-primary navbar-btn">提交代码</button>
			<button type="button" id="demo" class="btn btn-success navbar-btn">HTML模版</button>
			<div class="btn-group">
			  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				导入库 <span class="caret"></span>
			  </button>
			  <ul class="dropdown-menu">
				<li><a href="#">使用 jQuery 3.3.1</a></li>
				<li><a href="#">使用 Bootstrap 3.4</a></li>
				<li><a href="#">使用 Vue 2.6.4</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">更多</a></li>
			  </ul>
			</div>
		</div>
		<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
		  <div class="modal-dialog modal-lg" role="document">
		    <div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">扩展库<h4>
					</div>
					<div class="modal-body">
						<div class="input-group">
							<span class="input-group-addon" id="basic-addon2">输入库名：</span>
						  <input type="text" class="form-control" placeholder="搜索扩展库……功能开发中了，暂不可用" aria-describedby="basic-addon2">
						</div>
						<strong style="color:red">功能开发中，暂不可用</strong><br><span>你可以在<a href="https://www.bootcdn.cn/" target="_blank">https://www.bootcdn.cn/</a>查找你需要的扩展库</span>
					</div>
		      <div class="modal-footer">
		      	Life is fantastic.
		      </div>
		    </div>
		  </div>
		</div>
		<!--END Buttons-->
		<!--CodeArea-->
		<div class="panel panel-primary code">
			<div class="panel-heading">
				<h3 class="panel-title">编辑你的代码：</h3>
			</div>
			<div id="ol">
				<textarea id="li" disabled></textarea>
			</div>
			<textarea id="sourcecode" spellcheck="false" wrap="off" class="texts" onkeyup="keyUp()" onFocus="keyUp()" onscroll="G('li').scrollTop = this.scrollTop;" placeholder="输入HTML代码……"></textarea>
		</div>
		<!--END CodeArea-->
		<!--Result-->
		<div class="panel panel-primary code">
			<div class="panel-heading">
				<h3 class="panel-title">查看结果：</h3>
			</div>
			<div id="resText"></div>
		</div>
		<!--END Result-->
		<!--Footer-->
		<div class="panel-footer">请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。</div>
		<div class="panel-footer" align="center">
			<a target="_blank" href="http://www.miitbeian.gov.cn/">粤ICP备18017347号</a><br>
			<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44060602000509"><img src="https://img.54xavier.cn/备案图标.png" alt="粤公网安备ico"/>粤公网安备 44060602000509号</a>
		</div>
		<!--END Footer-->
	</div>
	<script src="https://img.54xavier.cn/snow+.js"></script>
</body>
</html>

script.main.js

$(function(){
	'use strict';
	var htmlcode="<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>文档标题</title>\n</head>\n<body>\n\t<h1>我的第一个HTML页面</h1>\n\t<p>我的第一个段落。</p>\n</body>\n</html>";
	$("#sourcecode").val(htmlcode);
	$("#sourcecode").keyup();
	$("#send").click(function(){
		var ifr=document.createElement("iframe");
		ifr.setAttribute("frameborder","0");
		ifr.setAttribute("id","iframeResult");
		ifr.setAttribute("srcdoc",$("#sourcecode").val());
		document.getElementById("resText").innerHTML="";
		document.getElementById("resText").appendChild(ifr);
		/*$("#resText").html("");
		$("#resText").append($("#sourcecode").val());*/
	}).click();
	$("#demo").click(function(){
		$("#sourcecode").val(htmlcode);
		$("#sourcecode").focus();
		$("#send").click();
	});
	/**添加扩展库方法*/
	$("ul.dropdown-menu li").click(function(){
		var pattern=/<head>/;
		if (pattern.test($("#sourcecode").val())) {
			var arr=$("#sourcecode").val().split(/<head>/);
			if ($(this).index()==0) {
				$("#sourcecode").val(arr[0]
					+'<head>\n'
					+'<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>'
					+arr[1]);
			}else if($(this).index()==1){
				$("#sourcecode").val(arr[0]
					+'<head>\n'
					+'<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">\n'
					+'<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>\n'
					+'<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>'
					+arr[1]);
			}else if ($(this).index()==2) {
				$("#sourcecode").val(arr[0]
					+'<head>\n'
					+'<script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>'
					+arr[1]);
			}
		}else {
			if ($(this).index()==0) {
				$("#sourcecode").val('<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>'+$("#sourcecode").val());
			}else if($(this).index()==1){
				$("#sourcecode").val('<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">\n'
				+'<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>\n'
				+'<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>\n'
				+$("#sourcecode").val());
			}else if ($(this).index()==2) {
				$("#sourcecode").val('<script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>\n'+$("#sourcecode").val());
			}
		}
		$("#send").click();
	});
	/**textarea制表符按键监听，实现制表符功能，而不是跳转下一个组件*/
	$("#sourcecode").keydown(function(e){
		if (e.keyCode==9) {
			var selectionStart=e.target.selectionStart;
			$("#sourcecode").val($(this).val().substr(0,selectionStart)
			+"	"
			+$(this).val().substr(selectionStart));
			var $textareaselect=$(this);
			e.preventDefault();
			$textareaselect[0].setSelectionRange(selectionStart+1,selectionStart+1);
		}
	});
	$("#sourcecode").keyup(function(e){
		$("#send").click();
	})
});

script.js

/*文本框显示行号*/
String.prototype.trim2 = function()
{
	'use strict';
	return this.replace(/(^\s*)|(\s*$)/g, "");
};
function G(objid){
	'use strict';
	return document.getElementById(objid);
}
/*文本框显示行号*/
var num="";
function keyUp(){
	'use strict';
	var obj=G("sourcecode");
	var str=obj.value;
	str=str.replace(/\r/gi,"");
	str=str.split("\n");
	var n=str.length;
	line(n);
}
function line(n){
	'use strict';
	var lineobj=G("li");
	for(var i=1;i<=n;i++){
		if(document.all){
			num+=i+"\r\n";
		}else{
			num+=i+"\n";
		}
	}
	lineobj.value=num;
	num="";
}
function autoScroll(){
	'use strict';
	var nV = 0;
	if(!document.all){
		nV=G("sourcecode").scrollTop;
		G("li").scrollTop=nV;
		setTimeout(autoScroll,20);
	}
}
if(!document.all){
	window.addEventListener("load",autoScroll,false);
}

Xavier’s HTML Edit ==> Xavier’s HTML Edit

发布者

Xavier

这个人很懒，什么都懒得写。

发表评论