Inline link inside a component text property... for Build Mode?

Design help General
1

Is there a way to allow a user in Build Mode add an inline link to a Text field in a component property? Or do I have to set the field to be a Rich Text Element?

I’d prefer not the latter because I don’t want the client to have the ability to input headings, block quotes, etc. that they could do with a RTE.

2

At present it must be a rich text element, but I find that generally works well for clients. You can use the new tooltip feature too, to give some instructions on what’s permitted.

Alternatively you can “hack” around that using script, markdown, etc. but it’s not especially client-friendly.

For example in Markdown a link is formed like this-

This is a [link](https://link.com).

But if you did want that, it’s easily added as an SA5 attribute-

1 Like
3

You’ll need to use a Rich Text field if you want true inline links,Text fields won’t support them. One workaround I’ve used is a plain text field with markdown parsed via custom script, but that does open up more client-side quirks.

1 Like
4

Thanks… think I’ll just go the simpler RTE route and train the client (and keep fingers crossed) to not add all sorts of other styling in the spot!

1 Like
5

One useful note here to restrict what the client uses within rich text for any particular component:

If you add a specific class to that rich text element for that component, you can style each rich text element inside it with display none.

So if it’s just intended for text with links, you could set the all the heading elements to display none, and add that as a note in the component that they won’t show.

Not done this myself, curious if there would be any unforseen issues with doing this? In terms of SEO and accessibility, I’m pretty sure display none will hide any content added in there completely?

6

Maybe not display none, which affect CSS only ( the content is still there ).

But check out the new conditional visibility feature, which is processed server-side and removes the elements before the page is delivered. You can build much more powerful components that way.

7

The new conditional visibility feature is for CMS collections though correct?

OP and my suggestion is more to do with being able to add links to the text prop of a component for clients without them having the ability to add headings within the rich text element.

8

@lucianchevallier CMS pages, collection lists, components, anywhere you have data-binding.

1 Like