5202

ein Blog über technische Fragen zu Blogger

Browser zum Editor machen

von

Let's do some cool stuff ... bauen wir uns einen Texteditor aus einem Browser mit einer Zeile Code xD. Der Link öffnet einen neuen Tab - die neue Seite ist ein HTML Dokument und das könnt ihr als Editor benützen. Tippt einfach mal a bisserl Text rein.

Data URl

Normalerweise ist alles schon mal irgendwie und irgendwo von jemand ausprobiert worden - einen Browser als HTML Dokument zu benützen hat seltsamerweise noch nie jemand versucht.
Ehre wem Ehre gebührt: Die ursprüngliche Idee stammt von Jose Jesus Perez Aguinaga und macht seit zwei, drei Tagen die Runde im Netz.

Der Code selber ist eine simple Data URl:

data:text/html, <html contenteditable>

Kopiert den Code in eure Adressleiste und geht auf [Enter] und ihr habt den Texteditor vom Link oben.
Wie weit das tatsächlich sinnvoll ist oder einen Nutzen hat? Sei mal dahin gestellt, auf jeden Fall könnt ihr mit ein paar Zeilen HTML und CSS überraschend komplexe Dokumente bauen.

Favicon, Schriftgröße, Abstände ... alles drin. Der Code dazu schaut so aus:

data:text/html;charset=utf-8, <title>TextEditor</title><head><link href='http://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s;  -moz-transition: all linear 1s;  -o-transition: all linear 1s; transition: all linear 1s; }</style><link rel="shortcut icon" href="https://lh4.googleusercontent.com/-mmqnj4hASj0/UMW-oNNqVpI/AAAAAAAAAsc/iJ4EEPFcM0Q/s32/VACY0001.gif"></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Mein Editor!</h1>

Ihr werdet sicherlich bemerkt haben, dass innerhalb der Data URl ein vollständiges HTML Dokument liegt --- ihr könntet sogar Javascript, jQuery whatever darin ausführen.

Logische Folgerung: Mit dieser Technik könntet ihr komplette Demoseiten bauen und via Link lokal im Browser eurer Besucher ausführen -- that's really astonishing!

Keine Seiten-in's-Netz-stellen mehr, keine Wartezeiten, alles geht Blitzschnell ... weil kein Request ausgeführt wird. Hat definitiv was, wo man mal darüber nachdenken könnte ...

Anmerkungen

Und? Was haltet ihr davon? Schon ein paar schlaue Ideen, was ihr damit anstellen könntet?