转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746djavascript
目前市面上已经有不少相似的平台和方案了,相似像jsfiddle、CodePen、Storybook这样的平台,这些平台可让咱们在浏览器中建立代码并直接执行,无需单独在咱们本地建立项目,因此当你在测试一段代码时,这些平台可能会为你提供一些帮助。css
本篇文章是咱们 “如何建立____编辑器” 系列中的第一篇,后续可能还会包括:html
在本文中,咱们将学习如何建立一个基本的 HTML/CSS/JS 编辑器。java
首先,建立一个项目文件夹,例如:“js_editor“jquery
建立index.html 和 editor.js 文件bootstrap
如今,咱们建立一个HTML,CSS和JS的选项卡,每一个选项卡包含了一个文本框,一个文本框用于HTML、另外一个用于CSS、最后一个用于JS。咱们将使用iframe来呈现全部的HTML、CSS、JS。Iframe是一个建立新浏览器实例的html标记,它能够在其中呈现全部你自定义的代码效果,使用上就像你直接在浏览器中看到的效果是同样的。浏览器
如今,废话很少说,index.html所有代码以下:编辑器
<html> <title>HTML/CSS/JS Playground</title> <link rel="stylesheet" href='./bootstrap.min.css' /> <body> <style> textarea { background-color: black; color: white; width: 600px; height: 350px; } iframe { width: 400px; height: 350px } </style> <div class="container"> <h3>HTML/CSS/JS Playground</h3> <div class="row"> <div class="col-12"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#html" data-toggle="tab"> HTML</a></li> <li><a href="#css" data-toggle="tab">CSS</a></li> <li><a href="#js" data-toggle="tab">JS</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="html"> <p> <textarea style="float:left" id="htmlTextarea"></textarea> </p> </div> <div class="tab-pane fade" id="css"> <p> <textarea style="float:left" id="cssTextarea"></textarea> </p> </div> <div class="tab-pane fade" id="js"> <p> <textarea style="float:left" id="jsTextarea"></textarea> </p> </div> </div> </div> <div class="col-12"> <div> <iframe id="iFrame"></iframe> </div> </div> </div> </div> </body> <script src="./jquery.js"></script> <script src="./bootstrap.min.js"></script> <script src="./editor.js"></script> </html>
在其中,为了使选项卡功能更容易实现一点,我用到了bootstrap.min.js,bootstrap.min.css和jquery.js来帮助我。函数
如今,让咱们继续丰富editor.js吧:工具
const getEl = id => document.getElementById(id) const iFrame = getEl('iFrame').contentWindow.document const htmlTextArea = getEl('htmlTextarea') const cssTextArea = getEl('cssTextarea') const jsTextArea = getEl('jsTextarea') document.body.onkeyup = function() { iFrame.open() iFrame.writeln( htmlTextArea.value + '<style>' + cssTextArea.value + '</style>' + '<script>' + jsTextArea.value + '</script>' ) iFrame.close() }
咱们有一个函数getEl,它经过Dom的id来获取元素,下面咱们获得iframe的contentwindow.document。 而后,咱们分别建立HTML、CSS、JS textarea的实例,并得到内容。
咱们监听了body元素的keyup 事件,若是其子元素输入任意内容,将会触发对函数的调用,而后经过writeln写入Dom,经过获取这些内容,即能在相应的标签中加入合适的内容。
好的,通过简单的几行代码,咱们的编辑器已经初具雏形,请在浏览器中加载index.html。在这,咱们能够在相应的选项卡中输入相应的代码,右侧的iframe上便可完整呈现你设置的HTML、CSS和JS。
能够经过下面的gif看到,我是如何添加ID为“but“的按钮,而后设置样式,并在按钮上添加click事件并弹出”yes“框。
制做一个属于本身的编辑器很是简单,我也在文末提供了本文使用的项目地址,若是有任何疑问或建议,欢迎提出,谢谢!