后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 HTML、CSS 和 JavaScript 创建您自己的实时 Web 编辑器
介绍
在本教程中，我们将创建一个实时的 Web 编辑器。这是一个 Web 应用程序，允许您编写 HTML、CSS 和 JavaScript 代码并实时查看结果。它是学习 Web 开发和测试代码片段的绝佳工具。我们将使用iframe元素来显示结果。iframe 元素用于在当前 HTML 文档中嵌入其他文档。iframe 元素的 src 属性指定要嵌入文档的 URL。
什么是 Web 编辑器？
网页编辑器是一款网页应用程序，允许您编写 HTML、CSS 和 JavaScript 代码并实时查看结果。网页编辑器的用途包括：快速原型设计、轻松测试以及学习网页开发。
什么是实时网页编辑器？
实时网页编辑器是一种实时显示代码结果的网页编辑器。
先决条件
在开始本教程之前，您应该对 HTML、CSS 和 JavaScript 有基本的了解。您还应该对 DOM 以及如何使用 JavaScript 选择元素有基本的了解。最后，您应该对 iframe 元素有基本的了解。
您需要的软件：
- 代码编辑器（Visual Studio Code、Sublime Text、Atom 等）
- 网络浏览器（Google Chrome、Mozilla Firefox、Microsoft Edge 等）
- 用于实时预览的浏览器扩展（实时服务器、实时预览等）
- Github
- Github Pages 托管
步骤 1：创建 HTML 文件
创建一个新文件夹，并将其命名为“live-web-editor”。在该文件夹中，创建一个新文件，并将其命名为“ index.html ”。在代码编辑器中打开该文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Editor</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script defer type="text/javascript" src="app.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
<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="Type HTML code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var 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);}"></textarea>
<!-- Text area for Css Code -->
<textarea id="cssCode" placeholder="Type CSS code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var 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);}"></textarea>
<!-- Text area for Javascript Code -->
<textarea id="javascriptCode" spellcheck="false" placeholder="Type JavaScript code here" oninput="update(0)" onkeydown="if(event.keyCode===9){var 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);}"></textarea>
</div>
<div class="iframe-container split">
<iframe id="viewer"></iframe>
</div>
</body>
</html>
代码解释
onkeydown="if(event.keyCode===9){var 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);}
上述代码用于实时渲染文本区域，当您在文本区域中键入内容时它将自动渲染，并且还用于启用文本区域中的选项卡，因为默认情况下文本区域中未启用选项卡。
步骤2：创建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;
}
步骤3：创建JavaScript文件
创建一个新文件并将其命名为“ app.js ”。在代码编辑器中打开该文件并添加以下代码：
var j=0;
//Function for live Rendering
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>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
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 的值并将其存储在变量中
let text=htmlCode+"<style>"+cssCode+"</style>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
步骤 4：运行项目
保存所有文件，然后使用实时服务器扩展在浏览器中打开“ index.html ”文件。您应该看到以下输出：
步骤 5：尝试一下
现在，您可以在文本区域中尝试自己的代码，并在 iframe 中查看输出。
您还可以通过删除文本区域中的代码来测试实时渲染，并在 iframe 中查看输出。
资源
演示
改进
您可以通过添加更多功能来改进此代码编辑器，例如：
- 添加一个按钮以将代码下载为 zip 文件。
- 添加了 HTML、CSS 和 JavaScript 的自动完成功能。
- 为 HTML 添加了自动标签关闭功能。（我已经在代码编辑器中添加了此功能，请在此处查看）
- 添加了一个按钮来清除代码编辑器。
- 添加了一个按钮来更改代码编辑器的主题。
- 添加了一个按钮来更改代码编辑器的字体大小。
结论
在本教程中，您学习了如何使用 HTML、CSS 和 JavaScript 创建实时代码编辑器。您还学习了如何使用 split.js 库创建分屏布局。您可以使用此代码编辑器测试您的 HTML、CSS 和 JavaScript 代码。您还可以使用此代码编辑器创建您自己的网站。