Neos CMS NodeTypes：如何在 UI 中使 href 链接可编辑答案

【问题标题】：Neos CMS NodeTypes: How to make href link editable in UINeos CMS NodeTypes：如何在 UI 中使 href 链接可编辑
【发布时间】：2018-02-27 10:11:47
【问题描述】：

我想在 Neos 中制作一个内容元素作为预告片。整个预告框应该链接到 Neos 或 extern 内部的现有页面。如何在 Neos UI 后端的右侧面板中定义 href 链接？

此外，如果我在 Neos 后端单击预告框内的元素进行内联编辑，它不应该跳转到链接。

这是我目前所拥有的：

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'

【问题讨论】：

标签： typoscript fusion neoscms

【解决方案1】：

您需要在aloha 设置中启用链接，方法是将以下行添加到您的link 属性：

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

【讨论】：

感谢您的回答！我试过了，但我无法让它工作。行为仍然相同。没有在 ui 中定义 href 链接 url 的选项。我的目标是我可以点击内容元素并在右侧面板中选择一个链接。
在这种方法中，您应该会在页面的左上角看到一个设置链接的选项，您还可以在其中设置粗体、斜体、下划线等（cmscritic.com/site/assets/files/5185/…靠近段落下拉菜单）。如果这不满足您的要求，我稍后会写第二个答案，以便能够从右侧面板设置链接。
终于找到了。谢谢！我没想到它会出现在那里，对不起..我以为它会直接在元素上方或右侧面板中。最后我想要的不是一个世界上的链接，而是整个元素的链接（目前我在 HTML 模板中有 href="#" ）。如果我可以从右侧面板更改整个元素的链接，那将是完美的。

【解决方案2】：

显然我走错了路。同时我发现我的请求可以通过 Neos 的渲染条件轻松解决。现在我有一个用于后端和前端视图的不同代码部分。在预览模式下，我的按钮没有 href 标签，因此我可以使用内联编辑。

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'

这里有关于它的文档：http://neos.readthedocs.io/en/stable/References/ViewHelpers/Neos.html

【讨论】：