广州建站推广,emeinet亿玫网站建设,如何将wordpress转成小程序,个人域名注册入口使用 HTML、CSS 和 JavaScript 创建实时 Web 编辑器
在本文中#xff0c;我们将创建一个实时网页编辑器。这是一个 Web 应用程序#xff0c;允许我们在网页上编写 HTML、CSS 和 JavaScript 代码并实时查看结果。这是学习 Web 开发和测试代码片段的绝佳工具。我们将使用ifram…使用 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 htmlhtmlheadtitle实时编辑器/titlescript srchttps://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js integritysha512-tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20Bo2174g crossoriginanonymous/script/headbodydiv classcontainer split!-- Text area for Html Code --textarea idhtmlCode placeholderHTML code spellcheckfalse oninputupdate(0) onkeydownonkeydownFn(event)/textarea!-- Text area for Css Code --textarea idcssCode placeholderCSS code spellcheckfalse oninputupdate(0) onkeydownonkeydownFn(event)/textarea!-- Text area for Javascript Code --textarea idjavascriptCode spellcheckfalse placeholderJavaScript code oninputupdate(0) onkeydownonkeydownFn(event)/textarea/divdiv classiframe-container splitiframe idviewer/iframe/div
scriptfunction onkeydownFn(event) {if(event.keyCode9){let vthis.value,sthis.selectionStart,ethis.selectionEnd;this.valuev.substring(0, s)\tv.substring(e);this.selectionStartthis.selectionEnds1;return false;}if(event.keyCode8){update(1);}}
/script/body/html结果 上面的代码展示最基本的页面结构onkeydown方法用于实时渲染文本区域当我们输入文本区域时它会自动渲染并且还用于在文本区域中启用选项卡因为默认情况下在文本区域中未启用选项卡。update方法在下面的js文件中定义现在可以忽略。
创建 CSS 文件
创建一个新文件并将其命名为 styles.css。在代码编辑器中打开该文件并添加以下代码
import url(https://fonts.googleapis.com/css2?familyOpenSansdisplayswap);*{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 代码。当然如果想真正使用可能需要通过添加更多功能来改进此编辑器。
