学习HTML的过程中,我们经常会接触到
- W3School:http://www.w3school.com.cn/
- 菜鸟教程: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">×</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