Drücke die Tasten ◄ ► für weitere Artikel  

Mach deinen Browser mit nur einer Codezeile zum Text-Editor

Moderne Browser lassen sich mit nur einer Codezeile zum Text-Editor umfunktionieren. Wer schnell Notizen machen oder Artikel schreiben möchte, muss die gewohnte Browser-Umgebung nicht mehr verlassen.

Mach deinen Browser mit nur einer Codezeile zum Text-Editor

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 , 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

Moderne Browser lassen sich kurzerhand zum Text-Editor umfunktionieren.

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?

Autor:
293 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
36 Antworten
  1. von Jonas am 30.01.2013 (12:11Uhr)

    Spart einen Mausklick:
    data:text/html, Text Editor

  2. von Thomas Quensen am 30.01.2013 (12:11Uhr)

    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.

  3. von So kannst du deinen Browser als Text-Edi… am 30.01.2013 (12:18Uhr)

    [...] So kannst du deinen Browser als Text-Editor nutzen [...]

  4. von Viktor am 30.01.2013 (12:23Uhr)

    und wie speichert man dann das Ganze?

  5. von s. am 30.01.2013 (12:31Uhr)

    @Viktor
    Seite speichern unter ....

  6. von Viktor am 30.01.2013 (12:33Uhr)

    im Safari wird eine leere Seite gespeichert

  7. von BNB am 30.01.2013 (12:43Uhr)

    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?

  8. von BNB am 30.01.2013 (12:54Uhr)

    Nachtrag: Es ist nicht Firefox, sondern das NoScript-Plugin.

  9. von Andreas Klisch via facebook am 30.01.2013 (13:01Uhr)

    grosses kino!

  10. von Manuel am 30.01.2013 (13:03Uhr)

    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.

  11. von Daniel Fischer via facebook am 30.01.2013 (13:05Uhr)

    Why?

  12. von Lukas am 30.01.2013 (13:06Uhr)

    Ich find ja http://write.fm ziemlich praktisch.

  13. von Tom Kirschner via facebook am 30.01.2013 (13:09Uhr)

    data:text/html, <h2>Aha.</h2><p>Ihr seit ja richtige gangster...</p>

  14. von Jannis Kucharz via facebook am 30.01.2013 (13:15Uhr)

    Ich nutze die Browser Extension "Writebox" für Chrome, bin recht begeistert.

  15. von Andreas Maucher via facebook am 30.01.2013 (13:15Uhr)

    Sehr gut!

  16. von Jörg Schöneburg via facebook am 30.01.2013 (13:37Uhr)

    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.

  17. von Christoph S. Ackermann via facebook am 30.01.2013 (13:40Uhr)

    @Jörg Eclipse? Da wird aber der Browser extreeeeem langsam ;)

  18. von andreaswienes am 30.01.2013 (13:49Uhr)

    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

  19. von Andreas Scheibe via facebook am 30.01.2013 (13:51Uhr)

    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>

  20. von Rico Unltd via facebook am 30.01.2013 (13:57Uhr)

    also wer zu faul ist den editor zu öffen, dem ist auch nicht mehr zu helfen - so ein quatsch braucht man nicht!

  21. von Glückwunsch Karte via facebook am 30.01.2013 (14:20Uhr)

    Lustig, wenn auch überflüssig ;)

  22. von Phlipper Delfin via facebook am 30.01.2013 (15:08Uhr)

    Damit schocke ich meine Kollegen. Oh das wird ein Spaß

  23. von Christian Kler via facebook am 30.01.2013 (15:43Uhr)

    Sagen wir mal so: :)

  24. von Viktor am 30.01.2013 (16:44Uhr)

    @Manuel

    Die Vorlage ist gut, mit ein bisschen CSS angereichert ist es ein sehr schneller und schöner Texteditor. Danke fürs Posten!

    Gruß

  25. von Roland am 30.01.2013 (19:12Uhr)

    In den body noch ein:
    OnLoad="document.body.focus();"
    dann kann man gleich lostippen...

  26. von Christian Adam via facebook am 30.01.2013 (20:00Uhr)

    schönes Ding :D

  27. von Frank Srmnn via facebook am 30.01.2013 (23:26Uhr)

    monokultur war noch nie gut und wird es auch nie sein.. deshalb: Browser bleib beim Browsen

  28. von Jochen am 31.01.2013 (09:56Uhr)

    Man könnte einen kompletten rte da reinbauen - bookmarken und speichern lässt sich das auch:)

    data:text/html, BoldItalicUnderline

  29. von Mach deinen Browser mit nur einer Codeze… am 01.02.2013 (12:59Uhr)

    [...] on t3n.de Share this:E-MailDiggFacebookStumbleUponDruckenRedditTwitterGefällt mir:Gefällt mirSei der Erste [...]

  30. von roland.giersig am 06.02.2013 (12:44Uhr)

    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...

  31. von ZenPen macht deinen Browser zum Textedit… am 14.02.2013 (09:42Uhr)

    [...] 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. [...]

  32. von Schreiben im Browser: 5 Online-Textedito… am 12.04.2013 (08:46Uhr)

    [...] 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 [...]

  33. von Textdown: Simpler Markdown-Editor für d… am 29.05.2013 (09:13Uhr)

    [...] Mach deinen Browser mit nur einer Codezeile zum Text-Editor – t3n News [...]

  34. von Der Browser als Notizzettel | PCS Campus am 07.10.2013 (09:57Uhr)

    […] Internetportal der Zeitschrift t3n beschreibt in einem Artikel, wie man seinen Internetbrowser als Texteditor nutzen kann. Dazu ist eine einzige Zeile HTML-Code […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Browser
Tooltipp: Wichtige Browser-Infos auf einen Blick
Tooltipp: Wichtige Browser-Infos auf einen Blick

Web-Entwicklung kann nervenaufreibend sein. Besonders wenn der Kunde auf Fehler hinweist, die man einfach nicht reproduzieren kann. Mit diesen Tools bekommst du aber zumindest die wichtigsten... » weiterlesen

Ein Traum wird wahr: Töte IE6 und XP in Microsofts neuem Browser-Game
Ein Traum wird wahr: Töte IE6 und XP in Microsofts neuem Browser-Game

Microsoft feiert das Ende des Supports für Windows XP und den Internet Explorer 6 auf eine ganz eigene Art und Weise. In Form eines kostenfreien Browser-Games könnt ihr euch endlich an der... » weiterlesen

Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten
Emmet LiveStyle: CSS simultan im Editor und Browser bearbeiten

Mittlerweile gibt es einige Tools, um CSS-Änderungen im Editor direkt im Browser zu sehen: Sie lesen CSS-Dateien neu ein, sobald sie abgespeichert werden. Emmet LiveStyle beschleunigt das jetzt und.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen