真是一段神奇的代码(最小的编辑器)

近来,很久没看阮大佬的周分享,在文章中看到一个开源库,神奇的一段代码,忍不住star了, 目前star数量为2038,项目名也是很响亮,TinyEditor, 最小的编辑器,屌,屌,屌
链接TinyEditor

<body oninput="i.srcdoc=h.value+'<style>'+c.value+
            '</style><script>'+j.value+'<\/script>'">
    <style>
        textarea,
        iframe {
            width: 100%;
            height: 50%
        }

        body {
            margin: 0
        }

        textarea {
            width: 33.33%;
            font-size: 18
        }
    </style>
    <textarea placeholder=HTML id=h></textarea>
    <textarea placeholder=CSS id=c></textarea>
    <textarea placeholder=JS id=j></textarea>
    <iframe id=i>

项目就一个index.html 上面是全部代码

也可以直接复制git项目中代码(这里叫代码合适点)到浏览器地址栏

截图一波,这布局不就是codepen的雏形嘛,
这里写图片描述

srcdoc

srcdoc 属性规定页面的 HTML 内容显示在行内框架中
属性值是显示在框架中的 HTML 内容。必须是有效的 HTML 语法。

发布了38 篇原创文章 · 获赞 14 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/sinat_23156865/article/details/82286626