首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

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

  •  1
     
  •   powertoolsteam · 23 天前 · 363 次点击

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

     

    目前市面上已经有很多类似的平台和方案了,类似像 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>
    <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,通过获取这些内容,即能在相应的标签中加入合适的内容。

    开始使用编辑器

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

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

     

    结论

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

     

    下载源码演示包

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2868 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 11:38 · PVG 19:38 · LAX 03:38 · JFK 06:38
    ♥ Do have faith in what you're doing.