使用 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 代码。当然如果想真正使用,可能需要通过添加更多功能来改进此编辑器。

相关推荐
贩卖纯净水.4 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js