Neos CMS NodeTypes: How to make href link editable in UI

Question

I would like to make a content element in Neos for a teaser. The whole teaser box should be linked to an existing page inside of Neos or extern. How can I define the href link in the right panel in the backend of the Neos UI?

Also if I click on an element inside the teaser box for inline editing in the Neos backend it should not jump to the link.

Here is what I have so far:

Teaserbox.html:

{namespace neos=Neos\Neos\ViewHelpers}
<a href="#" {attributes -> f:format.raw()}>
    <neos:contentElement.editable property="title" tag="p" class="medium" />
    <neos:contentElement.editable property="text" tag="p" />
    <p class="link">
        <neos:contentElement.editable property="link" tag="span" />
    </p>
</a>

NodeTypes.Teaserbox.yaml:

'Test.Package:Teaserbox':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Teaser Box
    icon: icon-newspaper
    inspector:
      groups:
        teaser:
          label: Teaser Box
  properties:
    title:
      type: string
      ui:
        label: 'Title Label'
        inlineEditable: true
        aloha:
          placeholder: 'Title'
    text:
      type: string
      ui:
        label: 'Text Label'
        inlineEditable: true
        aloha:
          placeholder: 'Text'
    link:
      type: string
      ui:
        label: 'Link Label'
        inlineEditable: true
        aloha:
          placeholder: 'Link'

Answer 1

You need to enable link in aloha settings by adding following line to your link property:

'Test.Package:Teaserbox':
  ...
  properties:
    ...
    link:
      type: string
      ui:
        label: 'Link Label'
        inlineEditable: true
        aloha:
          placeholder: 'Link'
          link:
            'a': true

Answer 2

Apparently I was on the wrong track. Meanwhile I found out that my request can be solved easily with the rendering conditions of Neos. Now I have a different code part for the backend and frontend view. In the preview mode my button does not have a href tag so I can use inline editing.

Teaserbox.html

{namespace neos=Neos\Neos\ViewHelpers}
<f:if condition="{neos:rendering.inPreviewMode()}">
    <f:then>
        <a class="teaser">
    </f:then>
    <f:else>
        <a class="teaser" href="{linkUrl}">
    </f:else>
</f:if>

NodeTypes.Teaserbox.yaml:

'Test.Package:Teaserbox':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: Teaser Box
    icon: icon-newspaper
    inspector:
      groups:
        teaser:
          label: Teaser Box
  properties:
    linkUrl:
      type: string
      defaultValue: '#'
      ui:
        label: 'URL'
        reloadIfChanged: true
        inspector:
          group: ziehli
          editor: 'Neos.Neos/Inspector/Editors/LinkEditor'

Here the documention about it: http://neos.readthedocs.io/en/stable/References/ViewHelpers/Neos.html