CSS Klasse setzen für das Ziel eines Ankers
Eingetragen von TDI (47)am 17.04.2015 - 10:43 Uhr in
Hi,
ich benötige das Setzen einer CSS Klasse für diese sogenannten Anker auf einer Buchseite. Ähnlich wie im Word kann man ja auf Textstellen innerhalb des Dokuments resp. einer Buchseite im Drupal verlinken.
Man klickt also irgendwo ziemlich weit oben auf der Seite ein Link und springt an das definierte Ziel auf der gleichen Seite.
Im Standard benutze ich TinyMCE 3.5.11 und CK Editor 3.6.6. Für beide ist das "Link" und "Anker" PlugIn aktiv.
Das Problem ist, dass ich am Ziel, also dort wo jeweils das Ankersymbol eingefügt wird, eine CSS Klasse brauche.
So sieht der HTML Code jetzt aus:
Absprung:
<p><a href="#localanchor1" title="Test">Das ist der verlinkte Text (Absprung)</a></p>Ziel:
<p><a name="localanchor1">Zieltext</a></p>Das würde ich mir nun eben wünschen:
Absprung:
<p><a href="#localanchor1" title="Test">Das ist der verlinkte Text (Absprung)</a></p>Ziel:
<p><a name="localanchor1" class="anchor">Zieltext</a></p>Natürlich kann man diese Klasse nachträglich bei jedem bereits erstellten Link einbauen, das ist das eine, aber ich will das diese Klasse bei jedem zukünftigen lokalen Link automatisch hinzugefügt wird.
Leider bieten beide Editoren kein Klassenattribut für das Ziel des Ankers - immer nur für den Absprungpunkt, da brauch ich das aber nicht ....
Hat jemand da eine Idee?
TDI
- Anmelden oder Registrieren um Kommentare zu schreiben
per jquery add class bei a
am 17.04.2015 - 10:58 Uhr
per jquery add class bei a name
C.A.W. Webdesign
ok, das war ein kurzes statement ... ;-)
am 17.04.2015 - 11:32 Uhr
kannst du das eventuell ein wenig genauer erklären, wie das geht ... ich finde zu dem Thema unzählige Beispiele im Netz, aber wo binde ich das Javascript ein... sorry, bin leider kein Webentwickler und bin da ein wenig ratlos
da müßte ich jetzt auch
am 17.04.2015 - 12:52 Uhr
da müßte ich jetzt auch erstmal suchen
C.A.W. Webdesign
Zitat: ich finde zu dem
am 17.04.2015 - 15:50 Uhr
ich finde zu dem Thema unzählige Beispiele im Netz, aber wo binde ich das Javascript ein
auch dazu findest zu unzählige Anleitungen im Netz.
Hier nur ganz kurz:
in der theme.info Datei kannst du eine eigenen JS-Datei "registrieren". Das soll heißen, dass die immer mit geladen wird.
Das geht ungefähr so:
scripts[] = js/NAME-DER-DATEI.jsWenn die Datei im Theme-Unterordner /js liegt.
In die JS-Datei schreibst du am besten erst einmal einen "JQuery-Rumpf"
z.B. so:
(function($){
$(document).ready(function(){
});
})(jQuery);
und dann trägst du dort die Query-Methoden, Anweisungen, Funktionen, was auch immer ein.
Gruß
Berthold Lausch
Drupal Video-Tutorials
ich hab das mal probiert ... DANKE
am 20.04.2015 - 13:20 Uhr
damit funktioniert es sogar ;-)
Ich habe nur das Problem, das bei mir ja lediglich
<a name="" id="">text</a>reingeschrieben wird. Die id ist hier im Standard immer so wie der eingetragene Name des Ankers, also nicht statisch ...Damit kann ich mich wohl nicht auf diese id beziehen um die Klasse einzutragen.
(function($){
$(document).ready(function(){
var id='tdi1';
var myClassName="anchor"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
});
})(jQuery);
Custom filter
am 21.04.2015 - 06:56 Uhr
Moin.
Der sicherstetm Weg, Klassen in die Anchor reinzubekommen, ist ein eigener Filter-Handler.
Vom Prinzip her läuft das so: beim Speichern des Textes schaut der Filter durch den Text, ob ein bestimmtes Muster vorhanden ist ("
<a name="...">) und ersetzt dass gefundene Muster dann nach einen Wünschen.Du kannst den Filter entweder komplett selbst bauen ([api:hook_filter_info:7]) oder Du verwendest das Modul [do:customfilter Custom filter]. Bei Letzterem könntest Du dann folgende Optionen verwenden:
* "Pattern" (ungetestet):
/(<a[^>]+(name="\w+")[^>]+>)/* "PHP Code": on
* "Replacement" (auch ungetestet ;)):
$result = str_replace($matches[2], $matches[2] . ' class="anchor"', $matches[1]);hth,
Stefan
Tipp: Beachte die Verhaltensregeln des DrupalCenter.