Nesting neos:contentElement.editable / neos:contentElement.editable without additional tag?

Using Neos & Flow
1

Hi,

I’d like to have a page with a title and a subtitle. Creating the node type and rendering the template is no problem.

'My.Page:MyDocument':
  superTypes: ['TYPO3.Neos:Document']
  . . .
  properties:
    'title':
      type: 'string'
      . . .
    'subtitle':
      type: 'string'
      . . .

My problem is to render the two properties title and subtitle. I want to render subtitle inside the title's tag like this:

<h1 class="ui header">{title}
  <small class="sub header">{subtitle}</small>
</h1>

That’s perfectly fine in order to just render the properties’s values . But I’d like to to edit the properties inline inside the backend. With the code above that is not possible.

I would need something like

<h1 class="ui header">{neos:contentElement.editable(property: 'title', tag: 'none')}
  {neos:contentElement.editable(property: 'subtitle', tag: 'small' class="sub header")}
</h1>

Or

<neos:contentElement.editable property="title" tag="h1" class="ui header">
  {neos:contentElement.editable(property: 'subtitle', tag: 'small' class="sub header")}
</neos:contentElement.editable>

Is something like this possible?

2

No, the editor of course needs a tag to anchor to. You cannot have it without tags. And editors cannot be nested, so you need to accept the added span/div for the title (or only do it in backend).

3

Hi,

thank you for your answer. I got it working. In case somebody is trying to achieve something similar, here is how I did it:

<neos:contentElement.wrap>
  <h1 class="ui header">
    {f:if(condition: '{neos:rendering.inBackend()}', then: '{neos:contentElement.editable(property: "title", tag: "span")}', else: '{title}')}
    {neos:contentElement.editable(property: 'subtitle', tag: 'span', class: 'sub header')}
  </h1>
</neos:contentElement.wrap>

It renders clean code in frontend and is editable in backend.

Aren’t the two editors nested with <neos:contentElement.wrap> in my solution? It’s working but could it be wrong?

4

That is the wrapper for the full content element but not an editor.
You cannot nest contentElement.editable.