html手机编辑器内含css,打造属于自己的 HTML/CSS/JavaScript 实时编辑器

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。

本篇文章是我们 “如何创建____编辑器” 系列中的第一篇，后续可能还会包括：

创建一个Angular编辑器

创建一个React编辑器

…

在本文中，我们将学习如何创建一个基本的 HTML/CSS/JS 编辑器。

让我们立即开始吧

首先，创建一个项目文件夹，例如：“js_editor“

创建index.html 和 editor.js 文件

现在，我们创建一个HTML，CSS和JS的选项卡，每个选项卡包含了一个文本框，一个文本框用于HTML、另一个用于CSS、最后一个用于JS。我们将使用iframe来呈现所有的HTML、CSS、JS。Iframe是一个创建新浏览器实例的html标记，它可以在其中呈现所有你自定义的代码效果，使用上就像你直接在浏览器中看到的效果是一样的。

现在，废话不多说，index.html全部代码如下：

HTML/CSS/JS Playground

textarea {

background-color: black;

color: white;

width: 600px;

height: 350px;