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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/82563.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

excel中有哪些通配符、excel配置问题，数学函数篇1之sum系列

excel中有哪些通配符、excel配置问题，数学函数篇1之sum系列

学习excel前需要明确的是事&#xff1a;   在学习excel函数之前&#xff0c;大家需要明确一件事&#xff0c;excel现在设计到了一些新函数&#xff0c;这些新函数只能存在于office365、office2019及更 新版本之中&#xff0c;所以建议大家在学习时安装较新的版本&#xff0c;…
阅读更多...
高阶数据结构-图

高阶数据结构-图

高阶数据结构-图 图的表示 图由顶点和边构成&#xff0c;可分为有向图和无向图 邻接表法 图的表示方法有邻接表法和邻接矩阵法&#xff0c;以上图中的有向图为例&#xff0c;邻接表法可以表示为 A->[(B,5),(C,10)] B->[(D,100)] C->[(B,3)] D->[(E,7)] E->[…
阅读更多...
Ribbon：负载均衡及Ribbon

Ribbon：负载均衡及Ribbon

什么是负载均衡&#xff1f; 第一种轮询算法&#xff0c;依次遍历去执行&#xff0c;达到负载均衡 集成Ribbon 导入pom&#xff0c;在消费者服务里的pom文件导入 <!-- Ribbon 集成 --><!-- https://mvnrepository.com/artifact/org.springframework.cloud/spr…
阅读更多...
-Webkit-Box 在 Safari 中出现的兼容性问题

-Webkit-Box 在 Safari 中出现的兼容性问题

一、问题背景&#xff1a; UI要求要实现这样的效果&#xff0c;使用 display:-webket-box在chrome浏览器下完美解决 但是马上啪啪打脸&#xff0c;在safari浏览器下显示空白 &#xff0c;不能不说浏览器之间的兼容性简直就是天坑 二、解决办法 通过浏览器调试发现原本float的…
阅读更多...
[机器学习]特征工程：主成分分析

[机器学习]特征工程：主成分分析

目录 主成分分析 1、简介 2、帮助理解 3、API调用 4、案例 本文介绍主成分分析的概述以及python如何实现算法&#xff0c;关于主成分分析算法数学原理讲解的文章&#xff0c;请看这一篇&#xff1a; 探究主成分分析方法数学原理_逐梦苍穹的博客-CSDN博客https://blog.csdn.…
阅读更多...
YOLOX算法调试记录

YOLOX算法调试记录

YOLOX是在YOLOv3基础上改进而来&#xff0c;具有与YOLOv5相媲美的性能&#xff0c;其模型结构如下&#xff1a; 由于博主只是要用YOLOX做对比试验&#xff0c;因此并不需要对模型的结构太过了解。 先前博主调试过YOLOv5,YOLOv7&#xff0c;YOLOv8,相比而言&#xff0c;YOLOX的环…
阅读更多...
RS232、RS422、RS485硬件及RS指令、RS2指令应用知识学习

RS232、RS422、RS485硬件及RS指令、RS2指令应用知识学习

RS232、RS422、RS485硬件及RS指令、RS2指令应用知识学习 一、串行&#xff08;异步/同步)通讯、并行通讯、以太网通讯 二、单工通讯/半双工通讯/双工通讯 三、常用硬件接口&#xff08;工业上基本是RS485两线制的接线&#xff09; 常用硬件接口RS232/RS422/RS485&#xff0c;…
阅读更多...
C#与西门子PLC1500的ModbusTcp服务器通信2--ModbusTcp协议

C#与西门子PLC1500的ModbusTcp服务器通信2--ModbusTcp协议

Modbus TCP是近年来越来越流行的工业控制系统通信协议之一&#xff0c;与其他通信协议相比&#xff0c;Modbus TCP通信速度快、可靠性高、兼容性强、适用于模拟或数字量信号的传输&#xff0c;阅读本文前你必须比较熟悉Modbus协议&#xff0c;了解tcp网络。 一、什么是Modbus …
阅读更多...
[golang gin框架] 46.Gin商城项目-微服务实战之后台Rbac客户端调用微服务权限验证以及Rbac微服务数据库抽离

[golang gin框架] 46.Gin商城项目-微服务实战之后台Rbac客户端调用微服务权限验证以及Rbac微服务数据库抽离

一. 根据用户的权限动态显示左侧菜单微服务 1.引入 后台Rbac客户端调用微服务权限验证功能主要是: 登录后显示用户名称、根据用户的权限动态显示左侧菜单,判断当前登录用户的权限 、没有权限访问则拒绝,参考[golang gin框架] 14.Gin 商城项目-RBAC管理,该微服务功能和上一节[g…
阅读更多...
攻防世界-simple_php

攻防世界-simple_php

原题 解题思路 flag被分成了两个部分&#xff1a;flag2&#xff0c;flag2。获得flag1需要满足变量a0且变量a≠0&#xff0c;这看起来不能实现&#xff0c;但实际上当变量a的值是字符时&#xff0c;与数字比较会发生强制类型转换&#xff0c;所以a为字符型数据即可&#xff0c;变…
阅读更多...
掌控未知：项目中如何巧妙应对突发与紧急

掌控未知：项目中如何巧妙应对突发与紧急

引言 在项目管理的领域中&#xff0c;每一个项目都伴随着一系列的不确定性和挑战。这些不确定性可能源于外部环境的变化、团队内部的动态或技术的快速迭代。而在这些不确定性中&#xff0c;突发和紧急事件尤为考验项目经理的应变能力和决策智慧。那么&#xff0c;如何在项目中…
阅读更多...
数据结构＜树和二叉树＞顺序表存储二叉树实现堆排

数据结构＜树和二叉树＞顺序表存储二叉树实现堆排

✨Blog&#xff1a;&#x1f970;不会敲代码的小张:)&#x1f970; &#x1f251;推荐专栏&#xff1a;C语言&#x1f92a;、Cpp&#x1f636;‍&#x1f32b;️、数据结构初阶&#x1f480; &#x1f4bd;座右铭&#xff1a;“記住&#xff0c;每一天都是一個新的開始&#x1…
阅读更多...
Verilog中的 条件语句\多路分支语句\循环语句

Verilog中的 条件语句\多路分支语句\循环语句

Verilog中的条件语句\多分支语句\循环语句 文章目录 Verilog中的条件语句\多分支语句\循环语句一、背景二、if-else2.1 标准结构2.2 例子 三、case-endcase3.1 标准结构3.2 例子3.2.1 三路选择器的case部分&#xff0c;如下&#xff1a;3.2.2 casez的四路选择器&#xff0c;如下…
阅读更多...
论文学习——PixelSNAIL:An Improved Autoregressive Geenrative Model

论文学习——PixelSNAIL:An Improved Autoregressive Geenrative Model

文章目录 引言论文翻译Abstract问题 Introduction第一部分问题 第二部分问题 Model Architecture网络结构第一部分问题第二部分问题 Experiments实验问题 Conclusion结论问题 总结参考 引言 这篇文章&#xff0c;是《PixelSNAIL:An Improved Autoregressive Geenrative Model》…
阅读更多...
电脑上安装，多版本node

电脑上安装，多版本node

手上有一个vue3的项目&#xff0c;sass配置如下图所示&#xff1a; 安装了Python3.10和node 16.14.0&#xff0c;项目能正常install 跟run。 因工作需要&#xff0c;收上有一个vue2的项目&#xff0c;sass配置如下图所示&#xff1a; 执行npm intsall 的时候一直报Python2找不…
阅读更多...
Influxdb数据库（centos7）

Influxdb数据库（centos7）

Influxdb数据库 1、简介与使用场景 简介 InfluxDB是一个由InfluxData开发的开源时序型数据库&#xff0c;专注于海量时序数据的高性能读、高性能写、高效存储与实时分析等&#xff0c;在DB-Engines Ranking时序型数据库排行榜上排名第一&#xff1a; InfluxDB广泛应用于DevOps…
阅读更多...
ElasticSearch索引库、文档、RestClient操作

ElasticSearch索引库、文档、RestClient操作

文章目录 一、索引库1、mapping属性2、索引库的crud 二、文档的crud三、RestClient 一、索引库 es中的索引是指相同类型的文档集合&#xff0c;即mysql中表的概念 映射&#xff1a;索引中文档字段的约束&#xff0c;比如名称、类型 1、mapping属性 mapping映射是对索引库中文…
阅读更多...
MyBatis入门配置及CURD实现

MyBatis入门配置及CURD实现

目录 一、MyBatis简介 1. 什么是 MyBatis ? 2. MyBatis的特性 3. 什么是持久层框架&#xff1f; 二、MyBatis环境配置 2.1 创建maven工程 2.2 导入相关pom依赖 2.3 导入jdbc配置文件 2.4 Mybatis相关插件安装 3.5 Mybatis-cfg.xml 核心配置 2.6 引入Log4j2日志文件…
阅读更多...
在项目中如何解除idea和Git的绑定

在项目中如何解除idea和Git的绑定

在项目中如何解除idea和Git的绑定 1、点击File--->Settings...(CtrlAltS)--->Version Control--->Directory Mappings--->点击取消Git的注册根路径&#xff1a; 2、回到idea界面就没有Git了&#xff1a; 3、给这个项目初始化 这样就可以重新绑定远程仓库了&#x…
阅读更多...
前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色

前端vue自定义柱形图 选中更改柱形图颜色及文字标注颜色

随着技术的发展&#xff0c;开发的复杂度也越来越高&#xff0c;传统开发方式将一个系统做成了整块应用&#xff0c;经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改&#xff0c;造成牵一发而动全身。 通过组件化开发&#xff0c;可以有效实现…
阅读更多...
最新文章

Copyright @ 2022~2023