Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Gadgets & Lifestyle

Mach deinen Browser mit nur einer Codezeile zum Text-Editor

    Mach deinen Browser mit nur einer Codezeile zum Text-Editor
Moderne Browser lassen sich kurzerhand zum Text-Editor umfunktionieren.

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.

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?

Finde einen Job, den du liebst zum Thema Browser

17 Reaktionen
Torsten_Kelsch
Torsten_Kelsch

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

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

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

data:text/html, BoldItalicUnderline

Antworten
Roland
Roland

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

Antworten
Viktor

@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
andreaswienes
andreaswienes

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
Manuel

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

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

Antworten
BNB
BNB

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
Viktor

im Safari wird eine leere Seite gespeichert

Antworten
s.
s.

@Viktor
Seite speichern unter ....

Antworten
Viktor

und wie speichert man dann das Ganze?

Antworten
Thomas Quensen

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

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen