Mit dem Arbeiten mit Textauswahl habe ich mich schon in zwei vorigen Artikeln beschäftigt: Text automatisch markieren sowie Text an Cursorposition einfügen, an dem ich als Herausgeber mitgewirkt habe.
Textauswahl-APIs
Mit JavaScript ist es möglich, auf den vom Anwender selektierten Text zuzugreifen. Zudem lässt sich Text programmatisch markieren und die Markierung verändern. Das funktioniert über drei Schnittstellen:
window.getSelection()ist eine einst von Netscape/Mozilla erfundene Methode. Über das zurückgegebene Objekt können wir auf den ausgewählten Text sowie die dahinterliegenden DOM-Knoten zugreifen. Das Mozilla Developer Center hat zum Selection-Objekttyp eine gute Referenz. Mittlerweile wird die Selection-API in HTML5 standardisiert. Die Browser-Engines Gecko, Webkit und Presto unterstützen sie bereits.- Die Manipulation der Auswahl erfolgt über den W3C-Standard DOM 2 Range aus dem Jahr 2000. Dieser lässt zwar viele Wünsche offen, ist an einigen Stellen umständlich und bedarf einer Überarbeitung, doch er wird ebenfalls von den besagten Browser-Engines unterstützt. Das zentrale Range-Interface ist ebenfalls übersichtlich bei MozDev dokumentiert. Über das besagte Selection-Objekt kommt man an das zugehörige Range-Objekt.
- Der Internet Explorer 8 (Trident-Engine) unterstützt weder
window.getSelection()noch DOM 2 Range. Er hat jedoch äquivalente Objekte. Das sind document.selection sowie TextRange. Diese stellen ähnliche Funktionalität wie die oben genannten APIs zur Verfügung, arbeiten jedoch etwas anders. Manche Aufgaben lassen sich damit einfacher umsetzen als mit DOM 2 Range, manche schwieriger.
Um ein browserübergreifendes Script zu schreiben, müssen wir also eine Fähigkeitenabfrage machen, die zwischen window.getSelection und document.selection unterscheidet. Dann wird jeweils noch geprüft, ob die benötigten DOM-Range- bzw. TextRange-Fähigkeiten unterstützt werden. Die Funktionalität muss dann leider für beide Modelle separat implementiert werden.
Ich habe zwei kleine Scripte geschrieben, die das Arbeiten mit der Textauswahl demonstrieren.
SelectionMenu – Kontextmenü zur Markierung einblenden
newyorktimes.com hat ein praktisches Feature: Wenn man ein Wort markiert, erscheint darüber eine Sprechblase mit einem Fragezeichen. Bei einem Klick darauf öffnet sich ein Fenster und das markierte Wort wird im Wörterbuch nachgeschlagen:
Diese Funktion lässt sich recht einfach mit Ranges/TextRanges umsetzen. Man fragt die Range der aktuellen Auswahl ab und erstellt eine zweite, die am Ende der ersten beginnt. In diese leere Range wird nun ein Element eingefügt. Dieses Element beinhaltet das Kontextmenü, welches mit CSS über dem Wort positioniert wird. Bei einem Klick auf einen Menüeintrag wird der ausgewählte Text z.B. in eine Adresse eingefügt, welche aufgerufen wird.
Die Anwendung des Scriptes sieht so aus: Der Konstruktor SelectionMenu wird mit new aufgerufen. Der Funktion wird ein Object mit der Konfiguration übergeben. Die Eigenschaften dieses Objects sind:
container (Elementobjekt) |
Das DOM-Element, bei dessen Inhalt das Menü angezeigt wird |
|---|---|
menuHTML (String) |
Der HTML-Inhalt des Menüs |
handler (Funktion) |
Handlerfunktion, die beim Klick auf das Menü ausgeführt wird (gleich welcher Eintrag) |
minimalSelection (Number, optional) |
Minimalanzahl der ausgewählten Zeichen, damit das Menü angezeigt wird. Der Standardwert ist 5. |
Das folgende Anwendungsbeispiel erzeugt ein Kontextmenü mit Such-Links zu Google und Bing. Bei einem Klick auf die Menüeinträge wird der markierte Text bei der jeweiligen Suchmaschine gesucht.
new SelectionMenu({
// Überwache das Element mit der ID selectionmenu-demo
container : document.getElementById('selectionmenu-demo'),
// Menü-HTML
menuHTML : '<a id="selection-menu-google">Google-Suche</a>' +
'<a id="selection-menu-bing">Bing-Suche</a>',
// Handler-Funktion
handler : function (e) {
var target = e.target || e.srcElement,
id = target.id,
selectedText = this.selectedText,
query = encodeURI(selectedText.replace(/\s/g, '+')),
searchURI;
if (id == 'selection-menu-google') {
searchURI = 'http://www.google.de/search?ie=utf-8&q=';
} else if (id == 'selection-menu-bing') {
searchURI = 'http://www.bing.com/search?q=';
}
location.href = searchURI + query;
}
});
In der Handlerfunktion wird auf das angeklickte Element zugegriffen (Event-Target) und dessen ID ausgelesen. Der markierte Text wird aus this.selectedText ausgelesen. this verweist auf die zugehörige SelectionMenu-Instanz.
Über die ID des angeklickten Elements findet die Auswahl zwischen Google und Bing statt. Der markierte Text wird in die Google- bzw. Bing-Adresse eingebunden, welche schließlich über eine Zuweisung an location.href angesprungen wird.
Ich habe die Lösung mit IDs und einer einzigen Handlerfunktion gewählt, da das Event-Handling sonst sehr kompliziert werden würde. Mit TextRanges im Internet Explorer wird mit HTML-Code, nicht auf DOM-Ebene gearbeitet. Das heißt, beim Einfügen des Menüs müssten die immer Event-Handler immer von neuem registriert werden. Daher habe ich mich erst einmal für eine einfache Lösung mit einem Handler entschieden, in welchem dann nach dem angeklickten Link unterschieden wird.
Probieren Sie das Script aus! Markieren Sie Text in diesem Abschnitt, um das Kontextmenü zu öffnen.
Das sieht dann in etwa so aus:
⇩ selectionmenu-1.0.zip herunterladen (6 KB)
Das ZIP enthält das kommentierte Script selectionmenu.js, eine komprimierte Version selectionmenu.min.js, zur Formatierung das Stylesheet selectionmenu.css sowie eine Beispielseite.
Das komprimierte Script ist nur 2KB groß. Es ist eigenständig und benötigt keine Bibliothek und kein Framework.
Getestete Browser: Firefox 3.5.8 und 3.6.3, Internet Explorer 6, 7 und 8, Safari 4.0.5, Chrome 4.1, Opera 10.00 und 10.51
CopyLink – Beim Kopieren von Text automatisch Quelladresse einfügen
Ein weiteres praktisches Feature wird unter anderem von Tynt Insight angeboten: Beim Kopieren von Text auf der Seite wird automatisch die Seitenadresse in den markierten Text eingefügt. – Tynt nutzt dies zur Überwachung jedes Kopiervorgangs und zum Einfügen individueller Adressen für eine komplexe Statistik. Dies Nachzubauen liegt nicht in meiner Absicht. Es ist allerdings mit obigem Grundwissen über Ranges möglich, besagtes Feature in vereinfachter Weise umzusetzen.
Wenn Sie beispielsweise den Text »Franz jagt im komplett verwahrlosten Taxi quer durch Bayern« markieren und ihn in die Zwischenablage kopieren, etwa über die Tastenkombination Strg + C, dann landet folgender Text in der Zwischenablage:
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern Quelle: http://molily.de/
Cool, nicht? Wenn Sie jetzt denken, dass an direkt an der Zwischenablage herumgepfuscht wurde, so irren Sie sich. Dies ist nämlich nicht browserübergreifend möglich. Die Funktionsweise gleicht dem SelectionMenu weitesgehend.
Der Clou ist die Nutzung des copy-Events. Bei einem solchen Ereignis wird auf die (Text)Range des markierten Text zugegriffen. Es wird, genauso wie bei SelectionMenu, eine (Text)Range am Ende der ausgewählten eingefügt. Beim SelectionMenu enthält sie das Menü, im Falle des CopyLinks enthält sie den HTML-Code <span id="copylink"><br>Quelle: http://molily.de/</span>. Die Markierung wird auf den eingefügten Text ausgedehnt. Nach Abarbeitung des copy-Event-Handlers kopiert der Browser den markierten Text samt Quellenlink in die Zwischenablage.
Im Gegensatz zum Kontextmenü muss der eingefügte Text nicht sichtbar sein, deshalb verstecken wir ihn mit der Off-Left-Methode. Diese schiebt das span-Element mit absoluter Positionierung aus dem Dokument heraus. Nach dem copy-Event wird das span-Element automatisch aus dem Dokument entfernt und die ursprüngliche Markierung wiederhergestellt. Der Quellenlink wird also nur ganz kurz im Moment des Kopierens in die Markierung eingefügt.
Die Anwendung des Scriptes ähnelt dem SelectionMenu, ist aber noch einfacher. Es gibt einen Konstruktor CopyLink, der mit new aufgerufen wird. Er nimmt ein Konfigurations-Object mit folgenden Parametern entgegen:
container (Elementobjekt) |
Das DOM-Element, bei dessen Inhalt das Menü angezeigt wird |
|---|---|
handler (Funktion, optional) |
Handlerfunktion, die beim Kopieren ausgeführt wird. Sie muss einen String zurückgeben, welcher an die Textauswahl angehängt wird. Standard ist eine Funktion, die '<br>Source: ' + location.href zurückgibt. |
minimalSelection (Number, optional) |
Minimalanzahl der ausgewählten Zeichen, damit der Quellverweis eingefügt wird. Der Standardwert ist 20. |
Ein einfaches Code-Beispiel:
new CopyLink({
container : document.getElementById('copylink-demo'),
handler : function () {
return '<br>Quelle: ' + location.href;
}
});
Probieren Sie das Script aus, indem Sie Text in diesem Abschnitt markieren und in die Zwischenablage kopieren!
⇩ copylink-1.0.zip herunterladen (6 KB)
Das ZIP enthält das kommentierte Script copylink.js, eine komprimierte Version copylink.min.js sowie eine Beispielseite.
Das komprimierte Script ist nur 2KB groß. Es ist eigenständig und benötigt keine Bibliothek und kein Framework.
Getestete Browser: Firefox 3.5.8 und 3.6.3, Internet Explorer 6, 7 und 8, Safari 4.0.5, Chrome 4.1. Das Script läuft nicht in der aktuellen Opera-Version 10.51. Opera unterstützt das copy-Ereignis noch nicht, womit eine Grundvoraussetzung des Scriptes nicht erfüllt ist. Das Script ist insofern mit Opera kompatibel, dass keine Fehlermeldungen erzeugt werden.
Andy Drop hat kommentiert:
2010-04-13 22:26
Ich habe das copylink Script mal ausprobiert, und im IE8 scheint es auch einwandfrei zu funktionieren.
Im Firefox 3.5.9 konnte ich Text markieren und ohne Quellen Angabe wieder einfügen, indem ich einen ganzen Absatz per 3-fach Click markiert habe. Wenn ich den gleichen Absatz per Clicken-Ziehen-Loslassen markiere funktioniert es einwandfrei.
molily hat kommentiert:
2010-04-18 13:04
Danke fürs Testen, Andi. Der Firefox-Fehler ist mir schon aufgefallen, allerdings in einem anderen Kontext, für den ich bereits ein Fix eingebaut hatte. Den werde ich jetzt einmal ausdehnen. Das Problem ist, dass man die Auswahl auf die Textknoten herunterbrechen muss, wenn der Text eines ganzen Elements gewählt ist. In den anderen Browsern sind Start- und Endpunkt der Auswahl immer die Textknoten. Danke für den Hinweis!