Parse Kirbytext in Panel

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:

  '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:

<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)