轉載請註明出處:葡萄城官網,葡萄城爲開發者提供專業的開發工具、解決方案和服務,賦能開發者。
目前市面上已經有很多類似的平臺和方案了,類似像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">
<
`liclass="active"><
ahref="#html" data-toggle="tab"> HTML</
a></
li`>
<
`li><
ahref="#css" data-toggle="tab">CSS</
a></
li`>
<
`li><
ahref="#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
id="htmlTextarea"></textarea
>`
</
`p`>
</
`div`>
<
`div`class="tab-pane fade" id="css">
<
`p`>
<
`textarea
id="cssTextarea"></textarea
>`
</
`p`>
</
`div`>
<
`div`class="tab-pane fade" id="js">
<
`p`>
<
`textarea
id="jsTextarea"></textarea
>`
</
`p`>
</
`div`>
</
`div`>
</
`div`>
<
`div`class="col-12">
<
`div`>
<
`iframeid="iFrame"></
iframe`>
</
`div`>
</
`div`>
</
`div`>
</
`div`>
</
`body`>
<
`scriptsrc="./jquery.js"></
script`>
<
`scriptsrc="./bootstrap.min.js"></
script`>
<
`scriptsrc="./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“框。
結論
製作一個屬於自己的編輯器非常簡單,我也在文末提供了本文使用的項目地址,如果有任何疑問或建議,歡迎提出,謝謝!