Vorheriger Artikel Nächster Artikel

Mach deinen Browser mit nur einer Codezeile zum Text-Editor

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

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?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
16 Antworten
  1. von Jonas am 30.01.2013 (12:11 Uhr)

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

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

    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.

    Antworten Teilen
  3. von Viktor am 30.01.2013 (12:23 Uhr)

    und wie speichert man dann das Ganze?

    Antworten Teilen
  4. von s. am 30.01.2013 (12:31 Uhr)

    @Viktor
    Seite speichern unter ....

    Antworten Teilen
  5. von Viktor am 30.01.2013 (12:33 Uhr)

    im Safari wird eine leere Seite gespeichert

    Antworten Teilen
  6. von BNB am 30.01.2013 (12:43 Uhr)

    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?

    Antworten Teilen
  7. von BNB am 30.01.2013 (12:54 Uhr)

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

    Antworten Teilen
  8. von Manuel am 30.01.2013 (13:03 Uhr)

    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.

    Antworten Teilen
  9. von Lukas am 30.01.2013 (13:06 Uhr)

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

    Antworten Teilen
  10. von andreaswienes am 30.01.2013 (13:49 Uhr)

    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

    Antworten Teilen
  11. von Viktor am 30.01.2013 (16:44 Uhr)

    @Manuel

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

    Gruß

    Antworten Teilen
  12. von Roland am 30.01.2013 (19:12 Uhr)

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

    Antworten Teilen
  13. von Jochen am 31.01.2013 (09:56 Uhr)

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

    data:text/html, BoldItalicUnderline

    Antworten Teilen
  14. von roland.giersig am 06.02.2013 (12:44 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Browser
Epiphany: Das kann der neue Raspberry-Pi-Browser
Epiphany: Das kann der neue Raspberry-Pi-Browser

Das Raspberry-Pi-Projekt hat einen optimierten Browser für den Mini-Rechner vorgestellt. Das Ziel ist eine bessere Multi-Tab-Experience sowie Bild- und HTML5-Video-Beschleunigung. » weiterlesen

Diese beiden Browser sind die größten Laptop-Akkufresser
Diese beiden Browser sind die größten Laptop-Akkufresser

AnandTech hat Browser einem Test unterzogen, um herauszufinden, welcher von ihnen die Akkus eines Laptops am meisten fordert. Eines der überraschenden Ergebnisse: Googles Chrome-Browser liefert die … » weiterlesen

Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen