打造属于自己的 HTML/CSS/JavaScript 实时编辑器
<blockquote><p>转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。<br>原文出处：https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746d</p>
</blockquote>
<p> </p>
<p>目前市面上已经有很多类似的平台和方案了，类似像jsfiddle、CodePen、Storybook这样的平台，这些平台可以让我们在浏览器中创建代码并直接执行，无需单独在我们本地创建项目，所以当你在测试一段代码时，这些平台可能会为你提供一些帮助。</p>
<p>本篇文章是我们 “如何创建____编辑器” 系列中的第一篇，后续可能还会包括：</p>
<ul>
<li>创建一个Angular编辑器</li>
<li>创建一个React编辑器</li>
<li>…</li>
</ul>
<p> </p>
<p>在本文中，我们将学习如何创建一个基本的 HTML/CSS/JS 编辑器。</p>
<h2>让我们立即开始吧</h2>
<p>首先，创建一个项目文件夹，例如：“js_editor“</p>
<p>创建index.html 和 editor.js 文件</p>
<p>现在，我们创建一个HTML，CSS和JS的选项卡，每个选项卡包含了一个文本框，一个文本框用于HTML、另一个用于CSS、最后一个用于JS。我们将使用iframe来呈现所有的HTML、CSS、JS。Iframe是一个创建新浏览器实例的html标记，它可以在其中呈现所有你自定义的代码效果，使用上就像你直接在浏览器中看到的效果是一样的。</p>
<p>现在，废话不多说，index.html全部代码如下：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><html>
<title>HTML/CSS/JS Playground</title>
<link rel="stylesheet" href='./bootstrap.min.css' />
<body>
<style>
textarea {
background-color: black;
color: white;
width: 600px;
height: 350px;
}
iframe {
width: 400px;
height: 350px
}
</style>
<div class="container">
<h3>HTML/CSS/JS Playground</h3>
<div class="row">
<div class="col-12">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#html" data-toggle="tab"> HTML</a></li>
<li><a href="#css" data-toggle="tab">CSS</a></li>
<li><a href="#js" data-toggle="tab">JS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="html">
<p>
<textarea style="float:left" id="htmlTextarea"></textarea>
</p>
</div>
<div class="tab-pane fade" id="css">
<p>
<textarea style="float:left" id="cssTextarea"></textarea>
</p>
</div>
<div class="tab-pane fade" id="js">
<p>
<textarea style="float:left" id="jsTextarea"></textarea>
</p>
</div>
</div>
</div>
<div class="col-12">
<div>
<iframe id="iFrame"></iframe>
</div>
</div>
</div>
</div>
</body>
<script src="./jquery.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="./editor.js"></script>
</html>
</pre>
</div>
<p> </p>
<p>在其中，为了使选项卡功能更容易实现一点，我用到了bootstrap.min.js，bootstrap.min.css和jquery.js来帮助我。</p>
<p>现在，让我们继续丰富editor.js吧：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const getEl = id => document.getElementById(id)
const iFrame = getEl('iFrame').contentWindow.document
const htmlTextArea = getEl('htmlTextarea')
const cssTextArea = getEl('cssTextarea')
const jsTextArea = getEl('jsTextarea')
document.body.onkeyup = function() {
iFrame.open()
iFrame.writeln(
htmlTextArea.value +
'<style>' +
cssTextArea.value +
'</style>' +
'<script>' +
jsTextArea.value +
'</script>'
)
iFrame.close()
}
</pre>
</div>
<p> </p>
<p>我们有一个函数getEl，它通过Dom的id来获取元素，下面我们得到iframe的contentwindow.document。 然后，我们分别创建HTML、CSS、JS textarea的实例，并获得内容。</p>
<p> </p>
<p>我们监听了body元素的keyup 事件，如果其子元素输入任意内容，将会触发对函数的调用，然后通过writeln写入Dom，通过获取这些内容，即能在相应的标签中加入合适的内容。</p>
<h2>开始使用编辑器</h2>
<p>好的，经过简单的几行代码，我们的编辑器已经初具雏形，请在浏览器中加载index.html。在这，我们可以在相应的选项卡中输入相应的代码，右侧的iframe上即可完整呈现你设置的HTML、CSS和JS。</p>
<p>可以通过下面的gif看到，我是如何添加ID为“but“的按钮，然后设置样式，并在按钮上添加click事件并弹出”yes“框。</p>
<p><img src="https://img2018.cnblogs.com/blog/139239/201910/139239-20191021105120083-2024501475.gif" alt=""> </p>
<h2>结论</h2>
<p>制作一个属于自己的编辑器非常简单，我也在文末提供了本文使用的项目地址，如果有任何疑问或建议，欢迎提出，谢谢！</p>
<p> </p>
<p>下载源码演示包</p>
</div>
<div id="MySignature" role="contentinfo">
<hr>
<br>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网</p>
<!--p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解企业级低代码开发平台，请前往活字格
</p><p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解可嵌入您系统的在线 Excel，请前往SpreadJS纯前端表格控件</p>
<p style="font-size: 16px; font-family: 微软雅黑, 黑体, Arial; color: #000">了解嵌入式的商业智能和报表软件，请前往Wyn Enterprise
</p-->
<br><br><br>
来源：https://www.cnblogs.com/powertoolsteam/p/11712204.html
頁:
[1]