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

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

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

实时网页编辑器的作用

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

先决条件

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

创建 HTML 文件

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

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。在代码编辑器中打开该文件并添加以下代码:

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 。在代码编辑器中打开该文件并添加以下代码:

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变量中,然后调用iframewrite的方法把代码展示在iframe中。

使用script标签在html中引入。

结论

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

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
emmm4594 小时前
html兼容性问题处理
html
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js