コードはわずか384bytes！HTML/CSS/JavaScript対応、ブラウザからすぐに利用できる超軽量エディタ -TinyEditor
Post on:2018年8月9日
sponsors
CodePenのようなブラウザですぐ利用できる、HTML/CSS/JavaScript対応の超軽量の即席エディタを紹介します。
コードはわずか384bytes！
ブラウザのアドレス欄にコピペするだけで、すぐに利用できます。
当ブログでも人気だった「Cat Swinging on String」をエディタに書いてみました。
TinyEditorは、こちら。
上の左からHTML/CSS/JavaScriptで、下はプレビューです。
下記のコードをブラウザのアドレス欄にコピペするだけで、利用できます。
|
1 |
data:text/html,<body oninput="document.querySelector('iframe').srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{float:right;width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=JS id=j></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=HTML id=h></textarea><iframe> |
コードは下記のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body oninput="document.querySelector('iframe'). srcdoc=h.value+'<style>'+c.value+ '</style><script>'+j.value+'<\/script>'"> <style> textarea,iframe{float:right;width:100%;height:50%} body{margin:0} textarea{width:33.33%;font-size:18} </style> <textarea placeholder=JS id=j></textarea> <textarea placeholder=CSS id=c></textarea> <textarea placeholder=HTML id=h></textarea> <iframe> |
sponsors
