RTE - wrap link based on condition

Question

My TYPO3 website uses TYPO3 6.1 with the included RTE. What I want to archive is to wrap links with a DIV when a condition (link has class) it met.

The editor should only do the following:

1. Create a new text in the RTE (e.g. "My link")
2. Create a new link for the new Text in the RTE
3. Select a class for the link (e.g. "myClass")

This results in the following HTML:

<a href="#" class="myClass" title="sometitle">My Link</a>

In the website frontend, I want the user created link to be wrapped with a DIV - but only, if the link has the class "myClass".

I have tried the following

tt_content.text.20.parseFunc.tags.link.typolink.wrap = <div class="anotherClass">|</div>

which wraps all links with the DIV.

Is there a way in TS to only wrap the link, when the editor has selected "myClass" for it?

If not, is there another (editor friendly) way to archive this?

I have already looked at custom userElements and blockformats, but both seems to be too complicated for the editors, since they have to do more than one operation to create a single link with a special styling.

My resulting HTML in the frontend should look like this

<div class="anotherClass">
  <a href="#" class="internal-link" title="sometitle">My Link</a>
</div>

My last choise would be to use JQuery - but actually this is'nt a very clean solution so I would prefer a TYPO3/TS solution.

Answer 1

After some hours of debugging with Typoscript I finally figured out how to solve this issue. I used a similar technique as shown here http://wiki.typo3.org/External_links

Generelly, I just create a new register containing the class name of the link and then I use the class name to add the wrap to the link.

lib.parseFunc.tags.link {
  typolink.parameter.append = LOAD_REGISTER
  typolink.parameter.append {
    linkClass {
      cObject = TEXT
      cObject {
        stdWrap.data = parameters:allParams
      }
      # Split link params by space-char. 3rd value is the link class name
      split {
        token.char = 32
        cObjNum = 1||2||3
        3 = TEXT
        3.current = 1        
      }
    }
  }
  newWrap.cObject = CASE
  newWrap.cObject {
    key.data = register:linkClass
    # Set outer wrap for links depending on class name
    default = TEXT
    default.value = |
    myClass = TEXT
    myClass.value = <div class="anotherClass">|</div>
    internal-link = TEXT
    internal-link.value = <div class="anotherClassForInternalLink">|</div>
  }
}

lib.parseFunc_RTE.tags.link {
  typolink.parameter.append < lib.parseFunc.tags.link.typolink.parameter.append
  wrap < lib.parseFunc.tags.link.newWrap
}

Looks wired, but works perfectly :-)

Answer 2

Here is one new fresh update:

You can remove lines for: typolink.parameter.append Instead of the:

key.data = register:linkClass you can use key.data = parameters:class

When you have multiple classes you can do like:

lib.parseFunc.tags.a {
    newWrap.cObject = CASE
    newWrap.cObject {
        key.data = parameters:class
        default = TEXT
        default.value = |
        default.value.override.cObject = COA
        default.value.override.cObject {
            10 = TEXT
            10.value = <span>|</span><span class="arrow"><img src="fileadmin/_icn/icn_btn_arrow
            white.svg" alt="arrow"></span>
            10.if {
                value.data = parameters:class
                equals = link-as-btn btn--primary
            }
            20 = TEXT
            20.value = <b>|</b>
            20.if {
                value.data = parameters:class 
                equals = bold-btn
            }
        }
    }
}
lib.parseFunc_RTE.tags.a.innerWrap < lib.parseFunc.tags.a.newWrap