TYPO3 CKeditor not rendering javascript link

2
votes

I am using TYPO3 8.7.8 and have to provide a javascript link to deactivate Google Analytics.

The link should look like this:

<a href="javascript:gaOptout()" onclick="alert('Google Analytics is now deactivated');">Deactivate Google Analytics</a>

Unfortunately the link doesn't appear in the frontend, that means it's just a normal text inside a <p> tag. However in the backend everything is fine and it shows up as a link there...

Here is my yaml-configuration for the CKeditor:

# Load default processing options
imports:
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
    - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }

# Configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
  config:
    allowedContent: true
    linkJavaScriptLinksAllowed: true
    contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:my_extension/Resources/Public/Stylesheets/styles.css", "EXT:my_extension/Resources/Public/Stylesheets/fonts.css"]
    resize_enabled: true

    stylesSet:
    # block level styles
    - { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default', 'role': 'button', 'aria-pressed': 'true'}}

    format_tags: "p;h1;h2;h3;h4;h5;pre"

    toolbarGroups:
      - { name: styles, groups: [ styles, format ] }
      - { name: basicstyles, groups: [ basicstyles ] }
      - { name: paragraph, groups: [ list, indent, blocks, align ] }
      - { name: links, groups: [ links ] }
      - { name: clipboard, groups: [ clipboard, cleanup, undo ] }
      - { name: editing, groups: [ spellchecker ] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ table, specialchar ] }
      - { name: document, groups: [ mode ] }

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify

    removePlugins:
      - image

    removeButtons:
      - Anchor
      - Underline
      - Strike

buttons.:
  link.:
    queryParametersSelector.:
      enabled: true

What am I missing here?

4
ckeditortypo3

4 Answers

2
votes

we just run into the same problem - we wrote a small linkhandler for typo3 allowing only the javascript:gaOptOut(); link.

Get it here: https://www.infoworxx.de/download/ifx_linkhandler_googleAnalytics.zip

Sebastian

1
votes

That is not a problem of ckeditor but is prohibited by TYPO3 itself to avoid security issues - XSS.

A solution I use is something like this TYPO3 force internal links to cross domain pages to use https in news so that an editor e.g. links to http://ga-output.tld and this will be replaced by the JS link.

1
votes

You can add a class to your link in ckeditor using the source button (<>).

<a class="gaOptout" href="#">your linked text</a>

and now you just rewrite your function to an onclick event like this:

$('.gaOptout').on('click', function(){
your function
});
1
votes

This still seems to be an issue in T3 9.5, especially with this Google OptOut Script. Easy workaround without coding: we cut out the paragraph containing the javascript and put it in a separated html-element. Just cut it out from CKEs Source-view an paste it in a new element. To keep the article in sequence, just cut out the rest of the text an paste it in a new text-element.