Neuer tinyMCE entfernt "onClick" Code [gelöst]

**Kahmoon** · 10.09.2014, 11:58

Hallo zusammen,

ich betreibe bei einigen Links Google Analytics Eventtracking. Dafür setzt man auf einen Link ein onClick Event. Diese Events kann man später in Analytics auswerten. Übrigens der einzige Weg um abgehende Links zu tracken...

Code:

onClick="_gaq.push(['_trackEvent', 'Kampagne', 'Linkbezeichner']);"

sprich

HTML-Code:

<a href="blabla.html" onClick="_gaq.push(['_trackEvent', 'Kampagne', 'Linkbezeichner']);">Ein Trackinglink</a>

Seit dem neuen tinyMCE entfernt er aber diesen "onclick" Zusatz wenn ich ihn in der HTML Ansicht eingebe und speichere.

extend_valid_elements (http://bit.ly/ZgEknm) ignoriert er leider....

Kann mir jemand sagen wie ich das im Editor abstelle? Ich brauche diese Funktion

. Kein Bock das jedes mal über die Datenbank zu ändern

VG
Frank

**Kahmoon** · 11.09.2014, 08:41

Niemand?

**JMMB** · 12.09.2014, 16:37

Hi,

kann man das nicht in der TinyMCE.php angeben und damit erlauben, in der Zeile "extended_valid_elements"?

**Kahmoon** · 15.09.2014, 08:28

Siehe folgender Beitrag

**Kahmoon** · 15.09.2014, 08:41

Sodale...durch Zufall habe ich gerade die Lösung gefunden.

Code:

  extended_valid_elements: "a[href|onclick]",

a[href|onclick] war die Lösung.

VG

**Kahmoon** · 15.09.2014, 11:22

Und noch ein Nachtrag. Nur oben genannter Code zerstört wohl die Eigenschaft target=_blank

Daher muss folgender Code verwendet werden.

Code:

extended_valid_elements: "a[href|onclick|target|title]",  ,

Und wer mit rel nofollow arbeitet auch noch diesen Schnipsel

Code:

extended_valid_elements: "a[href|onclick|target|rel|title]",

**Kahmoon** · 30.09.2014, 09:35

Ich muss diesen Thread leider noch mal hoch holen. Ich habe festgestellt das jetzt jede Verlinkung, auch ohne Tracking, das Attribut target="_blank" und rel="nofollow" bekommt.

Edit:
Die Lösung ist es keinen Wert mitzugeben

ÄNDERT DAS BITTE BEI EUCH FALLS IHR MEINE ANLEITUNG OBEN VERWENDET HABT!

PHP-Code:


extended_valid_elements: "a[href|onclick|target|rel|title]",

**Knobibrot** · 14.09.2015, 11:18

in welcher Datei muss ich das genau ändern, und wo liegt die?

Danke und Grüße

**Andreas** · 14.09.2015, 11:39

system/config/tinyCustom.php

system/config/dcaconfig.php

PHP-Code:


// use tinyCustom for all textareas that use tinyMCE

array_walk_recursive($GLOBALS['TL_DCA'], function(&$v, $k){

  if($k === 'rte' && $v === 'tinyMCE')

  {

    $v = 'tinyCustom';

  }

});

Ich würde das aber über ne CSS-Klasse in den Links steuern class="track_kampagne_linkbezeichner".

Dann das Analytics-Template dementsprechend anpassen.

**Qriz** · 31.05.2016, 08:28

Der Beitrag ist zwar älter, aber da ich eben auch über das Problem gestolpert bin und die hier angegebene Lösung nicht funktioniert hat, habe ich noch einmal weiter recherchiert.

TinyMCE erlaubt kein Javascript in der URL.

Das lässt sich aber überschreiben.

In der Datei system/config/tinyMCE.php muss dafür folgende Zeile eingefügt werden:

Code:

allow_script_urls: true,

Komma am Ende muss weggelassen werden, wenn es die letzte Anweisung ist.

Quelle: TinyMCE Docs

**Kahmoon** · 31.05.2016, 08:53

Zitat von Qriz

Der Beitrag ist zwar älter, aber da ich eben auch über das Problem gestolpert bin und die hier angegebene Lösung nicht funktioniert hat, habe ich noch einmal weiter recherchiert.

Hmmm? Funktioniert sehr wohl :-). Nutze ich nach wie vor. Aber ich glaube dein Tipp ist unkomplizierter.

VG
Frank

**pipkin** · 19.01.2018, 13:49

Habe die Zeile "allow_script_urls: true" in meiner system/config/tinyMCE.php hinzugefügt, aber mein onclick=""-Zusatz wird dennoch immer wieder gelöscht, sobald ich den Quelltext-Editor schließe.

Ich habe in Systemwartung alles geleert, das Browserfenster neu geladen... mit ab- und angemeldet...

<a href="#" onclick="MyFunction();" target="_blank">Bezeichnung</a>

Wird immer wieder auf

<a href="#" target="_blank">Bezeichnung</a>

zurückgesetzt.

Was mache ich falsch?

**Andreas** · 19.01.2018, 16:59

Mögliche Ursachen:

Zeile falsch eingefügt (Zeile mit Umgebung hier zeigen)
Diese tinyMCE.php wird im BE nicht benutzt (nachsehen im Quellcode mit den Devtools des Browsers)
Ein Bug in TinyMCE (melden bei TinyMCE)

Ich würde da aber immer die zentrale Verwaltung solcher EventListener bevorzugen. D.h. Klasse auf den Link geben

HTML-Code:

<a href="#" class="doThis" target="_blank">Bezeichnung</a>

Und in der eigenen JS-Datei dann (ungetestet)

PHP-Code:


(function($) {

  $(document).ready(function() {



    $('a.doThis').click(function(){

      // doThis code

    });



  });

})(jQuery);

**pipkin** · 19.01.2018, 17:23

Die Zeile habe ich als letzte Zeile eingefügt. Ohne Komma.

Code:

 menubar: 'file edit insert view format table',
    toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',
    allow_script_urls: true
  });

Diese tinyMCE.php wird im BE nicht benutzt

Huch, ist das nicht Standard?
Ich habe noch nichts in meinen Devtools gefunden, was mir etwas über eingebundene PHP-Dateien verrät.. Ich such aber gern noch weiter..

Deine Methode ist natürlich wesentlich sauberer, danke für die Inspiration.
Ich habe mir erstmal so geholfen, dass ich den kompletten Link als HTML-Modul angelegt habe und den include.

Grundsätzlich ging es mir in diesem Fall darum, einen bequemen Weg für Redakteure zu finden. Diese bearbeiten Artikel/ Text-Elemente und fassen darüber hinaus besser nichts im BackEnd an - weil sie es nicht können oder auch nicht dürfen. So einen onclick-Tracking-Code nach Anleitung einzubinden und dazu in der Quellcode-Ansicht zu arbeiten ist für Redakteure schon ziemlich grenzwertig. Aber externe Javascripte.... lieber nicht.

**Andreas** · 19.01.2018, 18:07

Zitat von pipkin

Die Zeile habe ich als letzte Zeile eingefügt. Ohne Komma....

Huch, ist das nicht Standard?...

Aber externe Javascripte.... lieber nicht.

1. Das sieht korrekt aus.

2. Ja, das ist Standard. Aber wir kennen deine Installation ja nicht und wissen somit nicht, ob bei dir der Standard benutzt wird. Du findest den Code aus der tinyMCE.php als SCRIPT-Tag im Qellcode.

3. Was meinst du mit externe Javascipte? Ich habe nichts davon erzählt.

Man kann die Klasse auch direkt dem CE oder sogar nem Artikel geben, dann muss man nur den Selektor ändern.

PHP-Code:


$('.doThis a').click(function(){

Das geht natürlich nur, wenn man möchte, dass alle Links darunter diesen Click-EventListener bekommen sollen.

Eine Klasse auf einen Link aufzusetzen ist sehr leicht, wenn du eine vernünfige tinyCustom.php im Einsatz hast. Z.B. diese hier http://public.andreasburg.de/contao/tinyCustom.zip

Screen-2018-01-19_19-00-43.png

**pipkin** · 23.01.2018, 14:21

3. Was meinst du mit externe Javascipte? Ich habe nichts davon erzählt.

Mit extern meine ich in diesem Fall Javascript-Code, der an einer anderen Stelle als am Textobjekt selbst steht, also z.B. in einer js-Datei auf dem Server oder in der fe-page.

Das geht natürlich nur, wenn man möchte, dass alle Links darunter diesen Click-EventListener bekommen sollen.

Es ist noch schlimmer: Jeder Link muss einen anderen Code bekommen. Anlass - und im Zusammenhang mit der Ausgangsfrage - geht es um Tracking-Codes, die pro Link anders sind. Zumindest ein Parameter müsste also jedem Link mitgegeben werden können, und zwar durch die Arbeit im TinyMCE bzw. schlimmstenfalls in der Quellcode-Ansicht des TinyMCE. Denn wie schon erwähnt geht es in meinem Fall speziell darum, eine Redakteur-gerechte Lösung zu finden. Daher wäre es praktisch gewesen, wenn er einfach sein onclick-Snippet direkt im TinyMCE hätte anbringen können.

Beispiel:
<a class="button" href="files/downloads/einzigartigesdokument.pdf" target="_blank" onclick="gtag('event', 'Einzigartige Bezeichnung des Downloads', {'parameter': 'value'});">
Hier klicken</a>

Einem Link eine Klasse oder ID zu geben und an anderer Stelle die Funktion zu definieren (was ich mit "extern" meinte), leuchtet mir im Prinzip ein und ist auch ein mir bekanntes Verfahren. Im besonderen Fall muss wie gesagt immer etwas Einzigartiges pro Link definiert werden, damit die Klicks in Google Analytics einzeln getrackt werden können (der Google Tag Manager, der das selbst erkennen würde, ist leider nicht im Projekt inbegriffen). Daher hilft die Vergabe einer Klasse nicht weiter.

Ich habe es nun wie gesagt etwas anders gelöst: der Redakteur darf selbst Frontend-Module (Eigener HTML-Code) anlegen. Diese enthalten den Link. Und er hat gelernt, wie er das Modul per insert-Tag in den Artikel einbaut.

Offtopic-Zusatzfrage: gibt es eine Möglichkeit, sich die IDs in der Ansicht Frontend-Module übersichtlich ausgeben zu lassen? Wenn man ein bestimmtes Modul nach ID sucht, ist es etwas mühsam, mit der Maus auf die Stifte zu gehen.

**Andreas** · 23.01.2018, 19:33

Naja, benutzerfreundlich ist das so aber nicht.

Versuch mal die Infos aus dem Link herauszubekommen. Z.B.

Event - aus Klassen (Formate - siehe Bild)
Bezeichnung - aus dem Titel des Links
Parameter - da weiß ich nicht, wieviel unterschiedliche das sind und wie unterschiedlich die Values sind, Klassen oder data-Attribute.

Ich würde da ein Plugin aufsetzen, womit du data-Attribute erstellen kannst - data-event, data-description und data-parameter. Schau mal, ob es bei dem Pluginloader https://github.com/cliffparnitzky/TinyMcePluginLoader so ein Plugin gibt oder ein ähnliches, welches man als Basis nehmen kann. Z.B. https://github.com/cliffparnitzky/TinyMceLinkLightbox - dort wird bereits ein zusätzliches Feld für ein data-Attribut zu den Links hinzugefügt.

**Andreas** · 24.01.2018, 17:06

Ich hatte vor 3 Jahren mal eine Anfrage nach einem Plugin für TinyMCE gestellt, mit welchem man Attribute bearbeiten kann.
https://github.com/tinymce/tinymce/issues/2208

Daraufhin hat doch tatsächlich jemand eines geschrieben.
https://github.com/Gagaro/tinymce-editattributes

Ich habe mir den Code angeschaut und ihn so erweitert, dass man in dem Popup Attribute vorgeschlagen bekommt. Wenn diese Vorschläge bereits vorhanden sind, dann wird der Wert angezeigt. Wenn nicht dann sieht man den Vorschlag trotzdem und man kann einen Wert eingeben, sodass dieses Attribut erstellt wird. Entfernt man den Wert wieder, dann wird auch das Attribut entfernt.
https://github.com/Gagaro/tinymce-ed...butes/issues/1

Screen-2018-01-24_17-41-19.png

Edit: Vergessen: Wenn man das in der Konsole debuggen möchte, dann muss man in der tinyCustom.php den Aufruf von tinymce ändern

PHP-Code:


// vorher

// nachher

... src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">...

... src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.min.js">...