打造屬於自己的 HTML/CSS/JavaScript 實時編輯器
- 2019 年 10 月 21 日
- 筆記
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：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='./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“框。
結論
製作一個屬於自己的編輯器非常簡單，我也在文末提供了本文使用的項目地址，如果有任何疑問或建議，歡迎提出，謝謝！