Video button in textarea

Hi there,

From the textarea docs it seems there’s no “video” button available for a textarea out of the box. But since the (video: ) tag does work there, I was wondering if there’s a simple way to extend the textarea field or a plugin to add a video button with its respective dialogue box for filling in the video URL.


The markdown field plugin let’s you create custom buttons:

Thanks @pixelijn! Once again the Markdown Field is the solution to my problems.

I managed to make it work for my use case. However, since I added that button, the file button stopped working. Any idea why? I do have my own plugin in place for the (image: )tag to output srcset+lazyloading, but that shouldn’t be in the way of the file button opening the dialogue window to choose images from my files, right? Any ideas why this could be happening? Thanks!


This is my plugin for the file button:

// From:

$originalTag = Kirby\Text\KirbyTag::$types['image'];
Kirby::plugin('chinochano/image', [
	'tags' => [
		'image' => [
			'attr' => array_merge(
			'html' => function($tag) use ($originalTag)  {

				$file    = $tag->file($tag->value());
				$srcset  = $tag->srcset;
				$srcset  = option('thumbs.srcsets.' . $tag->srcset ) ?: option('thumbs.srcsets.default');
				$sizes   = option('srcset-sizes.' . $tag->sizes ) ?: option('srcset-sizes.default');
				$result  = $originalTag['html']($tag);

				if (! $file === true || is_null($srcset) === true || is_null($sizes) === true) {
					return $result;

				$pattern = '/<img.*?>/i';

				// src image with sizes and quality (if any) in filename
				$src = $file->thumb('pixel')->url();

				// build a new image tag with the srcset and sizes
				$image = Html::img($src, [
					'width'  => $tag->width,
					'height' => $tag->height,
					'class'  => $tag->imgclass . ' lazyload',
					'title'  => $tag->title,
					'alt'    => $tag->alt ?? ' ',
					'data-src' => $file->thumb('default')->url(),
					'data-srcset' => $file->srcset($srcset),
					'data-sizes'  => $sizes

				// replace the old image tag
				$result = preg_replace($pattern, $image , $result);

				return $result;


To add other relevant pieces of code…

The concerning piece of the blueprint:

        label: Body
        type: markdown
        size: large
          family: sans-serif
        required: true
        maxlength: 2000
          - bold
          - italic
          - link
          - file
          - video
        files: page.images
        uploads: false

The markdown plugin is in /site/plugins/markdown-field/.

I’ve added the custom button to the markdown fields in /site/plugins/markdown-field-video/ (chose that folder name to make sure it would be loaded after the markdown field plugin, as explained on the documentation).

In there I have two files:

index.php with the standard:

Kirby::plugin('community/markdown-field-video', []);

And index.js:

markdownEditor.button('video', {
extends: 'default',
data: function() {
	return {
		label: 'This is a video button',
		icon: 'video',
		type: 'video'
methods: {
	action() {
		this.insert('(video: '+ this.selection +')')

But that’s your Kirbytag code, not your code for the video button?

Indeed, that’s the Kirbytag code, because I thought that was the thing that was getting in the way. I’ve edited my previous answer with other relevant pieces of code.

In the meantime, I’ve discovered the file button works again if I remove the uploads: false option I had. Looks like a bug. I guess this is something to post on the plugin page.