#lifehack: Webseiten-Texte direkt im Browser bearbeiten

Heute Morgen sah ich einen Tweet, der mich sehr erstaunt hat. Der Nutzer @IMAC2 zeigte in einem kurzen Video, wie man den Inhalt einer Website ganz einfach editieren kann, und zwar so, als würde man einen WYSIWYG-Editor nutzen.

Da war ich als ehemalige aber dennoch langjährige Frontend-Entwicklerin sehr erstaunt. Und weil ich das einerseits mit den technisch interessierten Lesern dieses Blogs teilen, aber auch andererseits für mich an einer leicht abzurufenden Stelle konservieren möchte, habe ich kurzerhand beschlossen einen kurzen Blogpost dazu zu verfassen.

Alles, was man tun muss, um jeglichen Text innerhalb einer Website editierbar zu machen, ist, die Developer Console des Browsers zu öffnen und folgenden JavaScript-Befehl einzutippen:

document.designMode = 'on';

Neben document.designMode gibt es noch ein einen zweite JavaScript-Anweisung, nämlich element.contentEditable. Dieses ist lediglich für ein Element gültig.

Laut den MDN web docs unterstützen fast alle Browser diesen Befehl.

Wenn ihr also das nächste Mal ein Design im Browser manipulieren wollt, um kurz etwas zu demonstrieren (und sei es eben nur eine Textänderung), so geht es damit vielleicht schneller – vor allem, wenn mehrere Stellen an der Website angepasst werden sollen. Bei nur einer Seite lohnt es sich vermutlich nicht, und frei einfach gestylte Texte hinzufügen kann man leider auch nicht. Aber für den einen oder anderen Usecase halte ich diese Funktion für sehr sinnvoll.

(Bildquelle: Zan Ilic via unsplash.com)