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

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

使用script标签在html中引入。

请添加图片描述

结论

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis 工作总结

1.Redis是什么 Redis是互联网技术领域使用最为广泛的存储中间件&#xff0c;它是Remote Dictionary Service的首字母缩写&#xff0c;也就是远程字典服务。 2.Redis的用途&#xff1f; 2.1 计数器 2.2 缓存 2.3 分布式锁 2.4 消息中间件 3.Redis的数据类型 3.1 string&am…

如何找到一个数的所有质因数,以及如何快速判断一个数是不是质数

前情介绍 今天遇到一个需求&#xff1a;找到一个数所有的质因数。 初步解决 先定义一个判断质数的函数&#xff1a; def is_Prime(number):i 2count 0while i < number:if number % i 0 :count 1i 1if count > 0:return Falseelse:return True 接着定义一个寻找质…

搜索引擎 笔记

目录 1. 搜索引擎 笔记1.1. Google 为什么成功1.2. 做搜索引擎, 既复杂, 又简单 1. 搜索引擎 笔记 1.1. Google 为什么成功 科技行业一直有个原则, 即人们不会愿意改变自己的使用习惯。Ramaswamy 在采访中坦言, “我们面临的最大障碍之一, 确实就是扭转用户的固有习惯。人们忘…

Vue 2 Mixin 混入

混入&#xff08;Mixins&#xff09;是一种在Vue组件中重用代码的方式。它允许你定义一些可复用的选项对象&#xff0c;然后将这些选项合并到不同的组件中。混入可以用于在多个组件之间共享逻辑、方法、生命周期钩子等。 示例&#xff1a; <!DOCTYPE html> <html>…

【云原生】【k8s】Kubernetes+EFK构建日志分析安装部署

目录 EFK安装部署 一、环境准备&#xff08;所有主机&#xff09; 1、主机初始化配置 2、配置主机名并绑定hosts&#xff0c;不同主机名称不同 3、主机配置初始化 4、部署docker环境 二、部署kubernetes集群 1、组件介绍 2、配置阿里云yum源 3、安装kubelet kubeadm …

模型数据处理-数据放入 session和@ModelAttribute 实现 prepare 方法详细讲解

&#x1f600;前言 本文详细讲解了模型数据处理-数据放入 session和ModelAttribute 实现 prepare 方法详细讲解 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c…

LeetCode //C - 56. Merge Intervals

56. Merge Intervals Given an array of intervals where intervals[i] [ s t a r t i , e n d i ] [start_i, end_i] [starti​,endi​], merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the in…

企业数字化转型大数据湖一体化平台项目建设方案PPT

导读&#xff1a;原文《企业数字化转型大数据湖一体化平台项目建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 喜欢文章&#xff0c;您可以点赞评论转发…

知识体系总结(九)设计原则、设计模式、分布式、高性能、高可用

文章目录 架构设计为什么要进行技术框架的设计 六大设计原则一、单一职责原则二、开闭原则三、依赖倒置原则四、接口分离原则五、迪米特法则&#xff08;又称最小知道原则&#xff09;六、里氏替换原则案例诠释 常见设计模式构造型单例模式工厂模式简单工厂工厂方法 生成器模式…

【精通性能优化:解锁JMH微基准测试】一基本用法

文章目录 1. 什么是JMH1.1 用JMH进行微基准测试1. JmhExample01.java2. 程序输出JmhExample01.java 2.2 JMH的基本用法2.1 Benchmark标记基准测试方法2.2 Warmup以及Measurement1. 设置全局的Warmup和Measurement&#xff08;一&#xff09;2. 设置全局的Warmup和Measurement&a…

设计模式篇---抽象工厂(包含优化)

文章目录 概念结构实例优化 概念 抽象工厂&#xff1a;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无须指定它们具体的类。 工厂方法是有一个类型的产品&#xff0c;也就是只有一个产品的抽象类或接口&#xff0c;而抽象工厂相对于工厂方法来说&#xff0c;是有…

Android Studio实现解析HTML获取图片URL,将URL存到list,进行列表展示

目录 效果build.gradle(app)添加的依赖(用不上的可以不加)AndroidManifest.xml错误代码activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL效果 build.gradle(app)添加的依赖(用不上的可以不加) dependencies {implementation com.square…

Python可视化在量化交易中的应用(11)_Seaborn折线图

举个栗子&#xff0c;用seaborn绘制折线图。 Seaborn中折线图的绘制方法 在seaborn中&#xff0c;我们一般使用sns作为seaborn模块的别名&#xff0c;因此&#xff0c;在下文中&#xff0c;均以sns指代seaborn模块。 seaborn中绘制折线图使用的是sns.lineplot()函数&#xff…

springboot+grpc+k8s+istio环境

2023年8月17日&#xff0c;本人之前使用过nacosdubbospringboot、eurekafeign等环境。最近学习到了istio服务网格集成到k8s也可以实现分布式微服务。 1. 环境 Kubernetes集群istio集成到k8sjdk17 (8也ok)gPRC服务间通信 2. 微服务 cloud-config服务是spring-cloud-config-s…

中国剩余定理及扩展

目录 中国剩余定理解释 中国剩余定理扩展——求解模数不互质情况下的线性方程组&#xff1a; 代码实现&#xff1a; 互质&#xff1a; 非互质&#xff1a; 中国剩余定理解释 在《孙子算经》中有这样一个问题&#xff1a;“今有物不知其数&#xff0c;三三数之剩二&#x…

【C++】做一个飞机空战小游戏(十)——子弹击落炮弹、炮弹与飞机相撞

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…

leetcode做题笔记88. 合并两个有序数组

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并后数组…

Mybatis的SqlSource SqlNode BoundSql

学习链接 MyBatis SqlSource解析 【Mybatis】Mybatis源码之SqlSource#getBoundSql获取预编译SQL Mybatis中SqlSource解析流程详解 Mybatis TypeHandler解析 图解 Mybatis的SqlSource&SqlNode - processon DynamicSqlSource public class DynamicSqlSource implement…

notepad++ verilog关键字自动补全

新建verilog.xml放在安装目录下 D:\Program Files (x86)\Notepad\autoCompletion <?xml version"1.0" encoding"Windows-1252" ?> <NotepadPlus><AutoComplete><KeyWord name"accept_on" /><KeyWord name"a…

mysql自定义实体类框架

根据表结构自动生产实体类和方法,根据反射与io生成,可自定义扩展方法 package com.digital.web.front; /*** pom依赖* <dependency>* <groupId>mysql</groupId>* <artifactId>mysql-connector-java</artifactId>* <version>5.1.27</ve…