Open aarondancer opened 6 years ago
I would actually stick to
i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'
for better compatibility and the same size, and
document.body.innerHTML+='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'
would be actually smaller than the es6 version.
Also, font-size:1em
seems unnecessary since it sets the size to the default
@explodingcamera the default size actually isn't 1em. 1em = 16px/root font size. At least for me, my browsers render 11px as the default, so 1em is substantially bigger and relatively close to 18px like the original version.
@explodingcamera the ES6 implementation for oninput
is 1 byte smaller and supports all modern browsers.
Nice catch for the onload
. Saves 2 bytes.
<style>
[id]{display:flex;flex-flow:wrap;font-size:1em;flex:1}
</style>
<body
oninput="i.srcdoc=h[v='value']+`<style>${c[v]}</style><script>${j[v]}</script>`"
onload="b.innerHTML='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'"
id=b>
'value'
in a variable: -1 bytestyle
above body allows body.innerHTML=
instead of body.innerHTML+=
: -1 byte=> with minimal white space: 262 bytes
i have try to fix 'placeholder', but it was impossible...
Updated with placeholders and old styling (minus font-size)
New size: 282 bytes Tested in: Chrome, Firefox Demo: https://aarondancer.github.io/TinyEditor/