Parse Kirbytext in Panel

Kirby 3
, ,
1

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

I have something like this:

        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.

2

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)

3

Hi Sonja. Nice to meet you. :hugs:

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

Here’s my solution, for strugglers like me:

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

And in PHP something like this:

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

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

5

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

1 Like
6

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

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

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

7

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

8

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. :slightly_smiling_face:

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

Thank you, Sonja! :pray: