3

I have a requirement to add a class to a p-tag if it has an a-tag child, like this:

<p class="read-more-link">
  <a href="#">Link</a>
</p>

I've tried the following without success (this is C# in EPiServer):

new {title="Read more link", selector="p", classes="read-more-link" } // this allows user to add class to any p
new {title="Read more link", selector="p > a", classes="read-more-link" } // this adds class to a tag
new {title="Read more link", selector="p > a", classes="read-more-link", wrapper="true" } // this does nothing
new {title="Read more link", selector="p > a", block="p", classes="read-more-link", wrapper="true" } // this does nothing
new {title="Read more link", selector="a", block="p", classes="read-more-link", wrapper="true" } // this does nothing

Anyone know how to solve this?

peter3
  • 1,074
  • 13
  • 22
  • Here's a fiddle that shows the problem: https://fiddle.tiny.cloud/0xhaab/4 – peter3 Nov 07 '20 at 13:00
  • Does `new { title="Read more link", block="p", classes="read-more-link", wrapper="true" }` work, without `selector`? – Ted Nyberg Nov 09 '20 at 12:52
  • Yes it does, but that means that you can add the class to any p-tag, not only those that have a child a-tag and that should not be allowed – peter3 Nov 09 '20 at 15:42
  • 1
    A wrapper will be added around the selected element. In other words, the wrapper means you can add a `

    ` tag with the specified CSS classes _around_ any element selected in the editor. AFAIK there is no way to specify that a wrapper should only be available to wrap specific elements.

     – Ted Nyberg Nov 10 '20 at 09:32

1 Answers1

1

You should be using a wrapper, see https://www.tiny.cloud/docs/configure/content-formatting/#wrapper

Eric Herlitz
  • 25,354
  • 27
  • 113
  • 157