Hide HTML tags in panel preview of custom block

Kirby 3 Solved ✅
,
1

I have made a custom block which is a structure field. Within this there is a writer field.

After adding text content to the writer field, the preview in the panel includes the HTML tags, eg. <p>Example text</p>.

I understand that this question may fall a bit beyond Kirby and may solely be Vue related, but I was wondering if there is a way to output a representation of the fields contents in the panel which respects the HTML tags, however does not show them?

This is from my index.js file:

    <div @dblclick="open">
	    <template>
	        <details open v-for="item in content.accordion">
	        <summary v-if="item.summary">{{ item.summary }}</summary>
	        <summary v-else>Details</summary>
	        {{ item.details }} /////// THIS IS THE WRITER FIELD
	        </details>
	    </template>
	</div>

Thanks a lot.

2

You can use a writer field in the Vue component. Have a look at the default text block’s Vue component: text | Kirby

<template>
  <k-writer
    v-for="item in content.accordion"
    :value="item.details"
  />
</template>

This will probably not work but you get the idea.

Alternatively you can use the v-html attribute:

<template>
  <details v-for="item in content.accordion">
    <div v-html="item.details"></div>
  </details>
</template>
1 Like
3

Thanks a lot @thguenther, I really appreciate the reply. Both worked with their individual nuances but for my particular case I found this worked the best: