t3n News Software

Mach deinen Browser mit nur einer Codezeile zum Text-Editor

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?

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
17 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 andreasscheibe 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
  15. von Torsten_Kelsch am 19.08.2015 (12:31 Uhr)

    Bei mir kam unter Opera/Windows so ein Quelltext beim Abspeichern heraus:


    Hallo Welt,
    <div><br></div>
    <div>was bist du für eine schöne Welt!</div>


    Zeilenumbrüche innerhalb von DIVs, um eine Leerzeile zu erzeugen. Nun ja.

    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
Tor Browser 6.0 ist da: Die Neuerungen im Überblick
Tor Browser 6.0 ist da: Die Neuerungen im Überblick

Der Tor Browser ist in Version 6.0 für Windows, OS X und Linux erschienen. Er basiert jetzt auf Firefox 45.1.1 und bringt eine ganze Reihe Bugfixes mit. » weiterlesen

30 praktische Erweiterungen für den Chrome-Browser
30 praktische Erweiterungen für den Chrome-Browser

Googles Chrome-Browser hat auch wegen der vielen praktischen Erweiterungen einen so starken Höhenflug in den letzten Jahren erlebt. Wir haben 30 der besten Chrome-Erweiterungen für euch … » weiterlesen

Ein Browser für Entwickler: Wie „Blisk“ deinen Workflow vereinfachen will
Ein Browser für Entwickler: Wie „Blisk“ deinen Workflow vereinfachen will

Bei all den verschiedenen Geräten und Bildschirmauflösungen im Web müssen Entwickler sicherstellen, dass jede Website richtig ausgegeben wird. Genau hier kommt Blisk ins Spiel – ein Browser, … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?