使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器

在本文中，我们将创建一个实时网页编辑器。这是一个 Web 应用程序，允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用iframe元素来显示结果。iframe 元素用于在当前 HTML 文档中嵌入另一个文档。iframe 元素的 src 属性指定要嵌入的文档的 URL。

实时网页编辑器的作用

实时网页编辑器是实时显示代码结果的网页编辑器。用途包括：快速原型设计、轻松测试和学习 Web 开发。

先决条件

在开始本文之前，应该对 HTML、CSS 和 JavaScript 有基本的了解。还应该对 DOM 以及如何使用 JavaScript 选择元素有基本的了解，以及熟悉 iframe 元素的使用。

创建 HTML 文件

创建一个新文件夹并将其命名为live-web-editor。在文件夹内，创建一个新文件并将其命名为 index.html。在代码编辑器中打开该文件并添加以下代码：

<!DOCTYPE html>
 <html>
 <head>
    <title>实时编辑器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js" integrity="sha512-tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20+Bo2174g==" crossorigin="anonymous"></script>
 </head>
 <body>
    <div class="container split">
        <!-- Text area for Html Code  -->
        <textarea id="htmlCode"  placeholder="HTML code" spellcheck="false" oninput="update(0)" onkeydown="onkeydownFn(event)"></textarea>
        <!-- Text area for Css Code  -->
        <textarea id="cssCode"  placeholder="CSS code" spellcheck="false" oninput="update(0)" onkeydown="onkeydownFn(event)"></textarea>
        <!-- Text area for Javascript Code  -->
        <textarea id="javascriptCode" spellcheck="false" placeholder="JavaScript code" oninput="update(0)" onkeydown="onkeydownFn(event)"></textarea>
    </div>
    <div class="iframe-container split">
        <iframe id="viewer"></iframe>
    </div>
<script>
    function onkeydownFn(event) {
        if(event.keyCode===9){
            let v=this.value,s=this.selectionStart,e=this.selectionEnd;
            this.value=v.substring(0, s)+'\t'+v.substring(e);
            this.selectionStart=this.selectionEnd=s+1;
            return false;
        }
        if(event.keyCode==8){
            update(1);
        }
    }
</script>
 </body>
 </html>

结果：

在这里插入图片描述

上面的代码展示最基本的页面结构，onkeydown方法用于实时渲染文本区域，当我们输入文本区域时，它会自动渲染，并且还用于在文本区域中启用选项卡，因为默认情况下在文本区域中未启用选项卡。update方法在下面的js文件中定义，现在可以忽略。

创建 CSS 文件

创建一个新文件并将其命名为 styles.css。在代码编辑器中打开该文件并添加以下代码：

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
}
.container{
    background: #E7E7E7;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100vh;
    margin: 3px;

}
.container textarea {
    background-color:  #121212;
    border:1px solid #0dddf0;
    resize: none;
    width: 100%;
    height: 33.333%;
    font-size: 1.4rem;
    padding: 10px;
    resize: vertical;
    overflow-y: scroll;
    color:white;
}
.container textarea:focus {
    outline: none;
    color:white;
}
.iframe-container{
    background: white;
    width: 50%;
    height: 100vh;
    margin: 3px;
}
#viewer{
    width: 100%;
    height: 100%;
}
.split {
  width:100%;
  height:100%;
}
.gutter {
  cursor: e-resize;
  height: 100%;
  background: grey;
}
.gutter.gutter-horizontal {
    cursor: ew-resize;
}

并通过link标签在html中引入，结果如下图所示：

在这里插入图片描述

创建 JavaScript 文件

创建一个新文件并将其命名为app.js 。在代码编辑器中打开该文件并添加以下代码：

let j = 0;

// 实时渲染方法
function update(i) {
  if (i == 0) {
    let htmlCode = document.getElementById("htmlCode").value;
    let cssCode = document.getElementById("cssCode").value;
    let javascriptCode = document.getElementById("javascriptCode").value;
    let text =
      htmlCode +
      "<style>" +
      cssCode +
      "</style>" +
      "<script>" +
      javascriptCode +
      "</script>";
    let iframe = document.getElementById("viewer").contentWindow.document;
    iframe.open();
    iframe.write(text);
    iframe.close();
  } else if (i == 1) {
    let htmlCode = document.getElementById("htmlCode").value;
    let html = htmlCode.slice(0, htmlCode.length);
    document.getElementById("htmlCode").value = html;
    j = 1;
  }
}

这段代码也比较好理解，获取 textarea 的值并将其存储在text变量中，然后调用iframe的write的方法把代码展示在iframe中。

使用script标签在html中引入。

请添加图片描述

结论

在本文中，我们学习了如何使用 HTML、CSS 和 JavaScript 创建实时代码编辑器。还学习了如何使用 split.js 库创建分屏布局。可以使用此代码编辑器来测试 HTML、CSS 和 JavaScript 代码。当然如果想真正使用，可能需要通过添加更多功能来改进此编辑器。