打造屬於本身的 HTML/CSS/JavaScript 實時編輯器

時間 2019-11-05

標籤打造屬於本身 html css javascript 實時編輯器欄目 HTML 简体版

原文原文鏈接

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746djavascript

目前市面上已經有不少相似的平臺和方案了，相似像jsfiddle、CodePen、Storybook這樣的平臺，這些平臺可讓咱們在瀏覽器中建立代碼並直接執行，無需單獨在咱們本地建立項目，因此當你在測試一段代碼時，這些平臺可能會爲你提供一些幫助。css

本篇文章是咱們「如何建立____編輯器」系列中的第一篇，後續可能還會包括：html

建立一個Angular編輯器
建立一個React編輯器
…

在本文中，咱們將學習如何建立一個基本的 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，經過獲取這些內容，即能在相應的標籤中加入合適的內容。