轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者，
原文出處：https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746d
目前市面上已經有很多類似的平臺和方案了，類似像jsfiddle、CodePen、Storybook這樣的平臺，這些平臺可以讓我們在瀏覽器中創建代碼并直接執行，無需單獨在我們本地創建專案，所以當你在測驗一段代碼時，這些平臺可能會為你提供一些幫助，
本篇文章是我們 “如何創建____編輯器” 系列中的第一篇，后續可能還會包括：
- 創建一個Angular編輯器
- 創建一個React編輯器
- …
在本文中，我們將學習如何創建一個基本的 HTML/CSS/JS 編輯器，
讓我們立即開始吧
首先，創建一個專案檔案夾，例如：“js_editor“
創建index.html 和 editor.js 檔案
現在，我們創建一個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='https://www.cnblogs.com/powertoolsteam/p/bootstrap.min.css' />
<body>
<style>
textarea {
background-color: black;
color: white;
width: 600px;
height: 350px;
}
iframe {
width: 400px;
height: 350px
}
</style>
<div >
<h3>HTML/CSS/JS Playground</h3>
<div >
<div >
<ul id="myTab" >
<li ><a href="https://www.cnblogs.com/powertoolsteam/p/#html" data-toggle="tab"> HTML</a></li>
<li><a href="https://www.cnblogs.com/powertoolsteam/p/#css" data-toggle="tab">CSS</a></li>
<li><a href="https://www.cnblogs.com/powertoolsteam/p/#js" data-toggle="tab">JS</a></li>
</ul>
<div id="myTabContent" >
<div id="html">
<p>
<textarea style="float:left" id="htmlTextarea"></textarea>
</p>
</div>
<div id="css">
<p>
<textarea style="float:left" id="cssTextarea"></textarea>
</p>
</div>
<div id="js">
<p>
<textarea style="float:left" id="jsTextarea"></textarea>
</p>
</div>
</div>
</div>
<div >
<div>
<iframe id="iFrame"></iframe>
</div>
</div>
</div>
</div>
</body>
<script src="https://www.cnblogs.com/powertoolsteam/p/jquery.js"></script>
<script src="https://www.cnblogs.com/powertoolsteam/p/bootstrap.min.js"></script>
<script src="https://www.cnblogs.com/powertoolsteam/p/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“框，
結論
制作一個屬于自己的編輯器非常簡單，我也在文末提供了本文使用的專案地址，如果有任何疑問或建議，歡迎提出，謝謝！
下載原始碼演示包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/181613.html
標籤：JavaScript
上一篇：關于Highcharts資料量超過1000時無法顯示問題
下一篇：Vue之組件及組件通信