Der mexikanische Software-Entwickler José Jesús Pérez Aguinaga, kann klassische Text-Editoren nicht leiden. Sie füllen seinen Arbeitsplatz ohne Mehrwert zu liefern, erklärt er. Als Alternative nutzt er deshalb seinen Browser, den er mithilfe einer Code-Zeile zum Text-Editor umfunktioniert. Als Bookmark gesichert, hat Aguinaga dadurch jederzeit die Möglichkeit, auf einen simplen Editor zurückzugreifen.
Anleitung: Den Browser als Text-Editor nutzen
Mithilfe einer Data URl erweitert Aguinaga seinen Browser um die Funktionen eines HTML-Dokuments. Ohne seine übliche Arbeitsumgebung verlassen zu müssen, kann er dadurch jederzeit mit dem Schreiben beginnen. Auch ihr könnt diesen Trick in nahezu allen gängigen Browsern nutzen. Die Code-Zeile lautet:
data:text/html, <html contenteditable>Die Kommentatoren seines Beitrags auf Coderwall haben die erste Version mittlerweile erweitert. Nur wenig komplexer aber deutlich ansehnlicher kommt der folgende Vorschlag daher, der den Text-Editor um einen Titel ergänzt und die Formatierung aufpoliert.
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">Ein dritter Kommentator erweiterte das simple Code-Konstrukt um zahlreiche Spielereien. Die sind zwar keineswegs nützlich, aber immerhin nett anzusehen. So sorgt der folgende Code dafür, dass sich die Hintergrundfarbe während des Schreibens ändert.
data:text/html, <html><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; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">Könnt ihr unsere Liste um einen vierten Vorschlag erweitern?
von Jonas 30.01.2013 (12:11Uhr) 1.
Spart einen Mausklick:
data:text/html, Text Editor
von Thomas Quensen 30.01.2013 (12:11Uhr) 2.
In Chrome kann der Text zusätzlich noch in bold, kursiv oder unterstrichen dargestellt werden, indem man den Text markiert und STRG+b, STRG+i bzw STRG+u drückt.
von Jonas 30.01.2013 (12:12Uhr) 3.
Besser: http://nopaste.info/ecebab5c8b.html :-D
von So kannst du deinen Browser als Text-Edi… 30.01.2013 (12:18Uhr) 4.
[...] So kannst du deinen Browser als Text-Editor nutzen [...]
von Viktor 30.01.2013 (12:23Uhr) 5.
und wie speichert man dann das Ganze?
von s. 30.01.2013 (12:31Uhr) 6.
@Viktor
Seite speichern unter ....
von Viktor 30.01.2013 (12:33Uhr) 7.
im Safari wird eine leere Seite gespeichert
von BNB 30.01.2013 (12:43Uhr) 8.
Hmm... bin kein Sicherheitsexperte, aber wenn Firefox mir sagt...
javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks.
Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference.
...sollte mir das nicht zu denken geben?
von BNB 30.01.2013 (12:54Uhr) 9.
Nachtrag: Es ist nicht Firefox, sondern das NoScript-Plugin.
von Andreas Klisch via facebook 30.01.2013 (13:01Uhr) 10.
grosses kino!
von Manuel 30.01.2013 (13:03Uhr) 11.
DataURIs scheinen ja ganz schön faszinierend zu sein. Meine Browser-Startseite sieht schon seit einiger Zeit wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body contenteditable>
</body>
<script>
document.body.innerHTML = localStorage.getItem('notepad');
document.body.addEventListener('input', function() {
localStorage.setItem('notepad', this.innerHTML);
});
</script>
</html>
Das hat den schönen Vorteil, dass 1. alle Eingaben umgehend im localStorage abgelegt werden und 2. man eine prima minimalistische Vorlage für ein HTML-Dokument mit jQuery griffbereit hat.
von Daniel Fischer via facebook 30.01.2013 (13:05Uhr) 12.
Why?
von Lukas 30.01.2013 (13:06Uhr) 13.
Ich find ja http://write.fm ziemlich praktisch.
von Tom Kirschner via facebook 30.01.2013 (13:09Uhr) 14.
data:text/html, <h2>Aha.</h2><p>Ihr seit ja richtige gangster...</p>
von Jannis Kucharz via facebook 30.01.2013 (13:15Uhr) 15.
Ich nutze die Browser Extension "Writebox" für Chrome, bin recht begeistert.
von Andreas Maucher via facebook 30.01.2013 (13:15Uhr) 16.
Sehr gut!
von Jörg Schöneburg via facebook 30.01.2013 (13:37Uhr) 17.
Leider keiner alternative für echte Entwickler, da brauch ich schon mehr Komfort, ein einfacher Text Editor reicht mir da nicht. Wenn man eine IDE wie Eclipse etc. integriert bin ich dabei. ;)Und man muss trotzdem den Tab wechseln oder das Fenster, oder sehe ich das falsch. ich für mich das selbe als ob ich in meine IDE wechsle.
von Christoph S. Ackermann via facebook 30.01.2013 (13:40Uhr) 18.
@Jörg Eclipse? Da wird aber der Browser extreeeeem langsam ;)
von andreasscheibe 30.01.2013 (13:49Uhr) 19.
data:text/html;charset=utf-8, TextEditor html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; } Editor
Features:
Tab-Titel, Fav-Icon, gut lesbare Schriftart, Überschrift im Editor, Rechtschreibkorrektur deaktiviert
von Andreas Scheibe via facebook 30.01.2013 (13:51Uhr) 20.
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; }</style><link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1> Editor</h1>
von Rico Unltd via facebook 30.01.2013 (13:57Uhr) 21.
also wer zu faul ist den editor zu öffen, dem ist auch nicht mehr zu helfen - so ein quatsch braucht man nicht!
von Glückwunsch Karte via facebook 30.01.2013 (14:20Uhr) 22.
Lustig, wenn auch überflüssig ;)
von Phlipper Delfin via facebook 30.01.2013 (15:08Uhr) 23.
Damit schocke ich meine Kollegen. Oh das wird ein Spaß
von Christian Kler via facebook 30.01.2013 (15:43Uhr) 24.
Sagen wir mal so: :)
von Viktor 30.01.2013 (16:44Uhr) 25.
@Manuel
Die Vorlage ist gut, mit ein bisschen CSS angereichert ist es ein sehr schneller und schöner Texteditor. Danke fürs Posten!
Gruß
von Roland 30.01.2013 (19:12Uhr) 26.
In den body noch ein:
OnLoad="document.body.focus();"
dann kann man gleich lostippen...
von Christian Adam via facebook 30.01.2013 (20:00Uhr) 27.
schönes Ding :D
von Frank Srmnn via facebook 30.01.2013 (23:26Uhr) 28.
monokultur war noch nie gut und wird es auch nie sein.. deshalb: Browser bleib beim Browsen
von Jochen 31.01.2013 (09:56Uhr) 29.
Man könnte einen kompletten rte da reinbauen - bookmarken und speichern lässt sich das auch:)
data:text/html, BoldItalicUnderline
von Josch 31.01.2013 (10:02Uhr) 30.
...bzw so http://nopaste.info/4b0f52a7c3.html
von Mach deinen Browser mit nur einer Codeze… 01.02.2013 (12:59Uhr) 31.
[...] on t3n.de Share this:E-MailDiggFacebookStumbleUponDruckenRedditTwitterGefällt mir:Gefällt mirSei der Erste [...]
von roland.giersig 06.02.2013 (12:44Uhr) 32.
Unbrauchbar in Chrome, da man den Text nicht speichern kann. Und erst wieder einen Editor aufmachen und den Text mit Cut-n-Paste übertragen? Nö.
Da mach ich lieber einen E-Mail-Draft in Gmail oder ein Dokument in Google Drive auf, da hab ich gleich auch noch Autosave...
von ZenPen macht deinen Browser zum Textedit… 14.02.2013 (09:42Uhr) 33.
[...] ZenPen ist wunderbar einfach – noch simpler als Tools wie iA Writer, OmmWriter und Byword. Einen ähnlichen Ansatz verfolgt der mexikanische Software-Entwickler José Jesús Pérez Aguinaga, der seinen Browser mithilfe der folgenden Code-Zeile zum Text-Editor umfunktioniert. [...]
von Schreiben im Browser: 5 Online-Textedito… 12.04.2013 (08:46Uhr) 34.
[...] eine Speicher-Funktion lässt sich damit nicht ohne Weiteres realisieren. Alle Infos zu dem Hack findet ihr im entsprechenden Beitrag. Selbst ist der Nerd: Mit einer einzigen Code-Zeile wird Googles Chrome-Browser zum einfachen [...]