• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

Text-Editor welcher contentEditable/designMode von Webkit nutzt

Tekl

Fairs Vortrefflicher
Registriert
01.06.05
Beiträge
4.630
Hallo,

ich meine ich hätte irgendwann mal einen Text-Editor in den Fingern gehabt, der ein Live-Vorschau von HTML-Seiten bot. Da gab's so eine Option, dass man die Seite innerhalb der Vorschau bearbeiten konnte, so wie es im Safari mit dem Attribut contentEditable/designMode möglich ist. Diese Änderungen an der Vorschau spiegelten sich dann auch gleich im Quelltext wieder, wenn ich mich recht erinnere.

Kennt jemand diesen Editor? Ich fände den sehr praktisch, um von anderen Korrekturen durchführen zu lassen.

Oder kennt jemand einen Weg, wie man so in Safari bearbeitete Seiten irgendwie speichern kann?

Um den Design-Mode in Safari zu aktivieren, kann man folgendes mal in die Adresszeile von Safari kopieren und ausführen. Danach kann man den Cursor in Text setzen und lostippen.
Code:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
 
Zuletzt bearbeitet:
Ich habe gerade rausgefunden, dass man mit folgendem auf den geändertern Inhalt zugreifen kann:

Code:
javascript:alert(document.body.innerHTML)

Weiß jemand, wie man damit ein Bookmarklet bastelt, welches den Source-Code in die Zwischenablage kopiert?
 
mit Safari kenn ich keinen weg, aber mit dem firefox, kannst du eine webseite laden, dann folgendes eingeben:

javascript:document.body.contentEditable ='true'; document.designMode='on'; void 0

dann kannst du die Seite verändern und einfach abspeichern.

Gruß Schomo
 
In Firefox klappt das aber nicht, wenn man nur den HTML-Code speichert.

Ich habe mir nun übergangsweise ein Bookmarklet für Safari zusammengebastelt. Da kann man den Design-Mode einschalten und mit erneutem Aufruf wieder ausschalten. Danach wird der Quellcode angezeigt.

Code:
javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/%3E/g,'>');s=s.replace(/%3C/g,'<');return s;} if (document.designMode != 'on') {document.title = '[DESIGN-MODE] : ' + document.title; document.designMode='on'; void 0;} else {document.title = document.title.replace(/\[DESIGN-MODE\] : /,''); document.designMode='off'; x=window.open(); x.document.write('%3Cpre%3E' + htmlEscape('%3Chtml%3E\n' + document.documentElement.innerHTML + '\n%3C/html%3E')); x.document.close(); }})();
 
Natürlich geht das, ich hab das zwar noch nie benötigt, aber gerade mal getestet, und es ging.

Sorry

Gruß Schomo
 
Es geht, wenn ich samt Bilder speichere, aber das will ich nicht.