Trying to do a block preview of a textarea field

Kirby 3 Solved ✅
#1

Hi,

I’m trying to preview some text:

{{ content.text }}

The output of this will be:

Lorem ipsum dolor sit amet: - My - List - Items

Instead of:

Lorem ipsum dolor sit amet:
- My
- List
- Items

The field “text” is a textarea.

If I do something like below the output is right, but I don’t want this to be editable inline. I just want to preview the textarea. Just as using the ->kirbytext() for templates.

<k-input
  :buttons="false"
  :value="content.text"
  type="textarea"
  @input="update({ text: $event })"
/>
#2

i think your PHP needs to return the computed text property.

#3

I’m having the exact same problem and don’t really understand what this means. How can I define what the PHP returns when calling the field from the Vue component?

#4

I also tried something like
<div v-html="content.text" />
but it (unsurprisingly) also does not render HTML.

#5

You need a custom API route that returns the rendered HTML, because the field value itself is just markdown.

#6

Is this solved? How is it done?

#7

I for my part gave up and worked around it. So unfortunately I never solved it.

#8

As has already been mentioned, this needs a custom route, see also:

Or use the writer field for your blocks.