# Parse Kirbytext in Panel

**URL:** <https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792>\
**Category:** Questions\
**Tags:** v3\
**Created:** [July 5, 2021, 6:06pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792 "2021-07-05T18:06:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Microman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/microman/32/15876_2.png) [@Microman](https://forum.getkirby.com/u/Microman)\
**Post date:** [July 5, 2021, 6:06pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/1 "2021-07-05T18:06:47Z")

</div>

Could anyone explain me how to convert kirbytext to HTML by vue?

I have something like this:

```auto
        text() {
            return this.content.text; // <- Should be return as HTML
        },

```

I know the way to do this in PHP.  
Thanks and big thumb-up for you effort building up this amazing CMS.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 5, 2021, 6:09pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/2 "2021-07-05T18:09:01Z")

</div>

Hey, welcome to our forum.

You need a custom API endpoint that returns the rendered HTML from the given field. Is there a particular reason you are using a textarea field inside blocks?

Here’s an example route that returns the rendered HTML for the given text:

```auto
  'api' => [
    'routes' => [
      [
        'pattern' => 'getRenderedText/pages/(:all)',
        'language' => '*',
        'method' => 'POST',
        'action' => function ($id) {
          $id = str_replace('+', '/', $id);
          $page = kirby()->page($id);
          $text = $this->requestBody('text');
          $field = new Kirby\Cms\Field($page, 'inhalt', $text);
          $data = [
            'text' => $field->kt(),
            'id' => $id,
            'page' => $page->url()
          ];
          return $data;
        }
      ]
    ]
  ],

```

Here is the corresponding Vue part where the route is used:

```auto
<template>
  <div @dblclick="open">
    <div v-if="text">
      <div class="content-wrapper" v-html="renderedText"/>
      </div>
      <div v-else>
      No content yet
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      renderedText: {},
    };
  },
  
  created() {
    this.kt();
  },
  
  methods: {
    kt() {
        const data = {
          text: this.text,
        };
        this.$api
          .post('getRenderedText/' + this.$attrs.endpoints.model, data)
          .then(data => {
            this.renderedText = data.text.value;
          });
      }
  },
  computed: {
    text() {
      return this.content.inhalt || '';
    }
  },
 watch: {
    "text": {
      handler (text) {
          const data = {
           text: this.text,
          };
          this.$api
          .post('getRenderedText/' + this.$attrs.endpoints.model, data)
          .then(data => {
            this.renderedText = data.text.value;
          });
        }
      },
      immediate: true
  }
}
</script>

```

Hope it helps.  
(Note that this is just something that I got to work somehow, so probably not the most intelligent Vue code under the sun)

---

<div class="post-metadata">

**Author:** ![Microman](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/microman/32/15876_2.png) [@Microman](https://forum.getkirby.com/u/Microman)\
**Post date:** [July 5, 2021, 7:14pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/3 "2021-07-05T19:14:13Z")

</div>

Hi Sonja. Nice to meet you. 🤗

I’m working on my own Block-Factory as you teached me in this tutorial (My currently bible 😉 ):

> **[Block factory: Creating your own blocks collection](https://getkirby.com/docs/cookbook/panel/block-collection)**
>
> Start your own block collection based on examples in this recipe

Here’s my solution, for strugglers like me:

```auto
text() {
   this.$api.post('my-plugin/converter', { markdown: value }).then( res => {
      return res.html
   });
}

```

And in PHP something like this:

```auto
'api' => [
   'routes' => [
      [
         'pattern' => 'my-plugin/converter',
         'method' => 'POST',
         'action' => function () {
            return array('html' => markdown(get('markdown')));
         }
      ]
   ]
]

```

---

<div class="post-metadata">

**Author:** ![mrfreedom](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mrfreedom/32/14018_2.png) [@mrfreedom](https://forum.getkirby.com/u/mrfreedom)\
**Post date:** [March 11, 2024, 12:47pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/4 "2024-03-11T12:47:44Z")

</div>

> [@texnixe](#):
>
> Here’s an example route that returns the rendered HTML for the given text:
> 
> ```auto
> 'api' => [
> 'routes' => [
> [
> 'pattern' => 'getRenderedText/pages/(:all)',
> 'language' => '*',
> 'method' => 'POST',
> 'action' => function ($id) {
> $id = str_replace('+', '/', $id);
> $page = kirby()->page($id);
> $text = $this->requestBody('text');
> $field = new Kirby\Cms\Field($page, 'inhalt', $text);
> $data = [
> 'text' => $field->kt(),
> 'id' => $id,
> 'page' => $page->url()
> ];
> return $data;
> }
> ]
> ]
> ],
> 
> ```
> 
> Here is the corresponding Vue part where the route is used:
> 
> ```auto
> <template>
> <div @dblclick="open">
> <div v-if="text">
> <div class="content-wrapper" v-html="renderedText"/>
> </div>
> <div v-else>
> No content yet
> </div>
> </div>
> </template>
> 
> <script>
> export default {
> data() {
> return {
> renderedText: {},
> };
> },
>   
> created() {
> this.kt();
> },
>   
> methods: {
> kt() {
> const data = {
> text: this.text,
> };
> this.$api
> .post('getRenderedText/' + this.$attrs.endpoints.model, data)
> .then(data => {
> this.renderedText = data.text.value;
> });
> }
> },
> computed: {
> text() {
> return this.content.inhalt || '';
> }
> },
> watch: {
> "text": {
> handler (text) {
> const data = {
> text: this.text,
> };
> this.$api
> .post('getRenderedText/' + this.$attrs.endpoints.model, data)
> .then(data => {
> this.renderedText = data.text.value;
> });
> }
> },
> immediate: true
> }
> }
> </script>
> 
> ```
> 
> Hope it helps.  
> (Note that this is just something that I got to work somehow, so probably not the most intelligent Vue code under the sun)

Hm, this code worked in Kirby 3, but doesn’t work in Kirby 4. 🙁

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 11, 2024, 12:52pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/5 "2024-03-11T12:52:12Z")

</div>

Field is no longer in the `Kirby\Cms` but `Kirby\Content` namespace.

---

<div class="post-metadata">

**Author:** ![mrfreedom](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mrfreedom/32/14018_2.png) [@mrfreedom](https://forum.getkirby.com/u/mrfreedom)\
**Post date:** [March 11, 2024, 3:15pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/6 "2024-03-11T15:15:37Z")

</div>

When I change `Kirby\Cms` to `Kirby\Content` than this error in the console is visible

```auto
TypeError: can't access property "model", this.$attrs.endpoints is undefined

```

EDITED: Sorry, the same error is also with `Kirby\Cms`

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 11, 2024, 4:51pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/7 "2024-03-11T16:51:28Z")

</div>

> [@mrfreedom](#):
>
> `TypeError: can't access property "model", this.$attrs.endpoints is undefined`

Not quite sure, try `this.endpoints.model` instead.

---

<div class="post-metadata">

**Author:** ![mrfreedom](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/mrfreedom/32/14018_2.png) [@mrfreedom](https://forum.getkirby.com/u/mrfreedom)\
**Post date:** [March 11, 2024, 5:51pm UTC](https://forum.getkirby.com/t/parse-kirbytext-in-panel/22792/8 "2024-03-11T17:51:49Z")

</div>

> [@texnixe](#):
>
> Not quite sure, try `this.endpoints.model` instead.

Changed it, it is a lot better.  
No more console errors, although it doesn’t recognize Kirby and Markdown tags, it displays only text. But I can live with that for now. 🙂

EDITED: Actually no, all is good, it displays Kirby tags, but raw headlines are unstyled, I will fix that.

Thank you, Sonja! 🙏