当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 打造属于自己的 HTML/CSS/JavaScript 实时编辑器

打造属于自己的 HTML/CSS/JavaScript 实时编辑器

2019年10月21日  | 移动技术网IT编程  | 我要评论

转载请注明出处：，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://blog.bitsrc.io/build-an-html-css-js-playground-64c62133746d

 

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

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

  • 创建一个angular编辑器
  • 创建一个react编辑器
  • …

 

在本文中，我们将学习如何创建一个基本的 html/css/js 编辑器。

让我们立即开始吧

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

创建 和 editor.js 文件

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

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

<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>

 

在其中，为了使选项卡功能更容易实现一点，我用到了bootstrap.min.js，bootstrap.min.css和jquery.js来帮助我。

现在，让我们继续丰富editor.js吧：

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()
}

 

我们有一个函数getel，它通过dom的id来获取元素，下面我们得到iframe的contentwindow.document。 然后，我们分别创建html、css、js textarea的实例，并获得内容。

 

我们监听了body元素的keyup 事件，如果其子元素输入任意内容，将会触发对函数的调用，然后通过writeln写入dom，通过获取这些内容，即能在相应的标签中加入合适的内容。

开始使用编辑器

好的，经过简单的几行代码，我们的编辑器已经初具雏形，请在浏览器中加载。在这，我们可以在相应的选项卡中输入相应的代码，右侧的iframe上即可完整呈现你设置的html、css和js。

可以通过下面的gif看到，我是如何添加id为“but“的按钮，然后设置样式，并在按钮上添加click事件并弹出”yes“框。

 

结论

制作一个属于自己的编辑器非常简单，我也在文末提供了本文使用的项目地址，如果有任何疑问或建议，欢迎提出，谢谢！

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网