Kirby YAKME - yet another kirby markdown editor

The problem with markdown tables is that they are fine for short tabular data. As soon as you need to insert paragraphs of text or multiple entries into a table cell, they fail.

You can - of course - use structure fields to generate more complicated tables, but if you need a way to dynamically insert tables into textarea fields, there is no proper solution. And if you use a port of the columns plugin, your tables will get very long and unreadable.

That’s what I think as well;

The markdown-structure for tables is okay, when you have a simple table.

But with more complex tables, you can better create a structure-field /
snippet;

Even WYSIWYG-editors do break when creating tables - it’s pure
handmans-craft :slight_smile:

Not quite a solution http://www.tablesgenerator.com/markdown_tables

But it can come in handy, when generating tables - it also imports / converts .CSV (Excel) to markdown-table-structure.

Maybe we can create a table-generator-field in the nearest future :slight_smile:

You would need a field that stores HTML instead of markdown. And I think it would get pretty messy if you wanted to support all sort of table features like combine rows or columns :scream:

Unfortunately, a table field still does not help if you want to include tables in a textarea field.

I think it’s rather easy to create a complex table-builder - using the amzing https://github.com/jenstornell/kirby-snippetfield

I’ve build a complex form-builder with it;

So I think it possible to build it, with the snippetfield; every structure-item can be set like this

  • table
  • row
  • cell

…and every item can have custom-styling in the backend, while they are drag-gable by default, so you can switch rows / cells / etc…

Clicking on an item, will open it’s content in a modal - where one can fill it with the most complex content you want.

Maybe I’ll build it myself, soon :slight_smile:

1 Like

Kirby - YAKME (yet another kirby markdown editor)

Kirby - YAKME


Download it for free at GitHub.

Version 1.0.0 - 2016-07-13

  • Initial Public Offering.

Version 1.1.5 - 2016-07-14

  • Small adjustmens / fixes.
  • Optional image-check for markdown-images.

What is it?

Kirby - YAKME (Yet Another Kirby Markdown Editor) is a markdown editor for Kirby.

It uses the excellent Simple MDE (editor) from https://simplemde.com/ as it’s core-engine.

More info about Kirby can be found at http://getkirby.com

Installation

  • Download the .zip and extract it to the root of your site.
  • Optionally you can configure some settings in site/config/config.php.

Usage

A sample blueprint is included, as an introduction for the basic set-up.

title: Page
pages: true
files: true
fields:

  title:
    label: Title
    type:  text

  yakme_example:
    label: Yakme - Example
    type:  yakme

The fieldtype is yakme and it accepts no additional options (besides the one you can set in config.php and by setting the field-preferences ( font / wysiwyg ) for each field alone).

Once set, the field can be rendered like this;

<?php
    echo $page->yakme_example()->kirbytext();
?>
```

****

The field acts like a normal textarea, but with some extra's;

1. Live preview toggle (**eye icon**).
2. Hide markdown codes (**hashtag icon**).
3. Side by side editing (**column icon**).
4. Fixed font option (**font icon**).
5. Full support of all markdown codes ( http://www.markitdown.net/markdown ).

The fixed font is helpfull when creating tables or entering codes.

Every instance of a YAKME-field can have individual preferences;

1. Fixed font or default font.
2. Toggle (WYSIWYG) markdown codes.

These settings are saved to the local machine in the localstorage of your browser.

### Config

By default, no `config` is needed. But you can set the height of the YAKME-field and perform an image-check;

```
c::set('yakme_height', 0);
```

This will set an "auto-height" for every field; the more the content, the larger the field.

```
c::set('yakme_height', 480);
```

This will set a "fixed-height" for every field; the size is in pixels and when the content becomes to large, a scrollbar will appear.

The settings defaults to 320px - so that's used when no settings are available.

****

```
c::set('yakme_images', 0);
```

Markdown-images will not be checked for validity, when rendered in the live-preview.

```
c::set('yakme_images', 1);
```
A check will be performed when previewing markdown-images. When an images does not exist, a error-sign is showed.

**Please note, Kirby image-tags can not be validated.**

###Known issues###

- Image drag / drop is not (yet) supported.
- Kirby-tags are supported, but not rendered in the live-preview.
- Images are only rendered in the live-preview with a full url.
- Turning of the markdown codes (hastag icon) do not show if text is selected / can hide the cursor.

****

![Kirby - YAKME](https://github.com/1n3JgKl9pQ6cUMrW/Kirby-YAKME/raw/master/kirby_yakme-capture.gif "Kirby - YAKME")

*Kirby YAKME - yet another kirby markdown editor.*
2 Likes

Thank you.

A first test shows, that you may want to change the blueprint to something like:

title: Yakme-Page
pages: true
files: true
fields:
  title:
    label: Title
    type:  text
  text:
    label: Yakme - Example
    type:  yakme

Now a page using this blueprint is rendered complete using the default.php template. The field yakme_example is unknown in this template.

Good luck!

I am not sure, if I understand what you mean;

The field should be yakme, but the name / #ID of the field is not important.

There is a yakme_example.yml blueprint included, but that’s just an example - not meant to be used in that way…

1 Like

If you add a new webpage using the panel and your blueprint, all is ok.

Then click on “Open preview” in the panel.

But then the content of your field yakme_example is not visible in the webpage, because the default fieldname for this field is text.

Good luck!

The field is an extension of the default Kirby textarea;

class YakmeField extends TextField { ... }

  public function input() {

    $input = parent::input();
    $input->tag('textarea');

    return $input;

  }

Once set, the field can be rendered like this;

<?php
    echo $page->yakme_example()->kirbytext();
?>
1 Like

I think @anon77445132 means that the content of the field is not rendered when displayed with the default template. But that is always the case for any field that is not part of the default template.

2 Likes

If you take my blueprint, it is renderd by

<?php
    echo $page->text()->kirbytext();
?>

which is the default in the Kirby Starterkit.

@anon77445132: you will of course have to call the the field by its fieldname, as with any field.

1 Like

Okay, but the field is a new field - not an existing field-type.

I did use the default Kirby textarea field as a start-point (copy/paste from the panel/src to site/fields) but the yakme field is totally new.

But the nice thing is, that’s 100% backwords-compatible with the textarea / other markdown-fields for Kirby;

It re-uses existing content, just by chancing the field-type without hazzle…

No problem, it was just a suggestion, because you do not provide a template.

Okay, I updated the blueprint and php example - thx.

It act like every other field - by the way :slight_smile:

Version 1.1.5 - 2016-07-14

  • Small adjustmens / fixes.
  • Optional image-check for markdown-images.

c::set('yakme_images', 0);

Markdown-images will not be checked for validity, when rendered in the live-preview.

c::set('yakme_images', 1);

A check will be performed when previewing markdown-images. When an images does not exist, a error-sign is showed.

Please note, Kirby image-tags can not be validated.

I come to Kirby from Textpattern and that had a plugin which was able to turn an Excel spread sheet into an html table. It was mearly a simple wrapper around a freely avaiable PHP spreadsheet library and it could only handle XLS files but it worked well enough. Shouldnt be too hard to build a similar plugin for Kirby. This simply let a user upload a spreadsheet file through the CMS and a special tag on the page determined where the table got generated given a source file ID.

The plugin died long ago and its author went awol but its in my github repo for prosperity if anyone fancies porting it to Kirby: https://github.com/CodeStalker/rcb_excel/blob/master/rcb_excel.php

I just created this table-builder in less than half an hour :slight_smile:

It’s not a plug-in, or something; just a structure builder - where every structure is a table-cell.

To keep things simple, rows are added automatically and tfoot / thead are not supported.

Individual cell can be swapped in the panel and you have a live preview of both the table-structure and some of the cells-content.

I can upload the code, if you want.

This post went into the wrong place… AJAX loaded a post into a post… I’m really losing my way with all the options in this forum :blush:

@bvdputte Like I said - you can build tables easy with a structure-field.

Kirby YAKME - yet another kirby markdown editor

It’s not really a plug-in, or field or something; just adding cells as structures :slight_smile: