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

前端开发作者： 2024-08-22 02:00:01

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

创建一个Angular编辑器
创建一个React编辑器
…

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

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_66413.html

相关资讯：打造属于自己的 HTML/CSS/JavaScript 实时编辑器