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

2022-11-30 591

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

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

让我们立即开始吧

首先浏览器专属css，创建一个项目文件夹，例如：““

创建index.html 和 .js 文件

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

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

    HTML/CSS/JS Playground
    
     
    
        
            textarea {
                background-color: black;
                color: white;
                width: 600px;
    <p>![百度浏览览器8.0安卓_浏览器专属css_css颜色取色器][1]

                height: 350px;
            }
             
            iframe {
                width: 400px;
                height: 350px
            }
        
        
            HTML/CSS/JS Playground
            
                
                    
                         HTML
                        CSS
                        JS
    &emsp;&emsp;![浏览器专属css_css颜色取色器_百度浏览览器8.0安卓][2]

                    
                    
                        
                            
                                
                            
                        
                        
                            
                                
                            
                        
                        
                            
                                
                            
    &emsp;&emsp;![css颜色取色器_浏览器专属css_百度浏览览器8.0安卓][3]

                        
                    
                
                
                    
                        
                    
                
            
     
        
     
    
    
    
    
    &emsp;&emsp;![百度浏览览器8.0安卓_css颜色取色器_浏览器专属css][4]

</p>
在其中，为了使选项卡功能更容易实现一点，我用到了.min.js浏览器专属css，.min.css和.js来帮助我。

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

const getEl = id => document.getElementById(id)

     
    const iFrame = getEl(&#39;iFrame&#39;).contentWindow.document
    const htmlTextArea = getEl(&#39;htmlTextarea&#39;)
    const cssTextArea = getEl(&#39;cssTextarea&#39;)
    const jsTextArea = getEl(&#39;jsTextarea&#39;)
     
    document.body.onkeyup = function() {
        iFrame.open()
        iFrame.writeln(
            htmlTextArea.value +
            &#39;&#39; +
    <p>![浏览器专属css_css颜色取色器_百度浏览览器8.0安卓][5]

            cssTextArea.value +
            &#39;&#39; +
            &#39;&#39; +
            jsTextArea.value +
            &#39;&#39;
        )
        iFrame.close()
    }

</p>
我们有一个函数getEl，它通过Dom的id来获取元素，下面我们得到的.。然后，我们分别创建HTML、CSS、JS 的实例，并获得内容。

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

开始使用编辑器

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

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

结论

制作一个属于自己的编辑器非常简单浏览器专属css 打造属于自己的 HTML/CSS/JavaScript 实时编辑器，我也在文末提供了本文使用的项目地址，如果有任何疑问或建议，留言与我们互动吧，对您有帮助动动小手点个赞，谢谢！

>>点此下载源码演示包

文章来源:https://zhuanlan.zhihu.com/p/96887837

风也温柔