Kirby YAKME - yet another kirby markdown editor

This topic was ment as introduction for the plug-in itself.

The plug-in is live now and has it’s own topic.



…well, at least I think it’s cool :slight_smile:

A fully blown 100% markdown editor, fullscreen, configurable for every field, realtime preview, perfect code…

Will release it… when ready :slight_smile:

6 Likes

This is looking very promising !
Did you find a solution to the image drag and drop issue ?

Nope - everything works, besides drag/drop.

But it’s an extreme, powerfull editor… so drag/drop is no breakpoint for me.

I am finalizing things now; you can set preferences for every instance of the editor field;

  • WYSIWYG or MARKDOWN
  • Monospace (“typewriter / terminal”) or Proportional font.
  • Auto-height or fixed-height
  • etc…

Once that’s done (the field saves the preferences in the local-storage as a JSON-object) I’ll release it.

Looking forward to this one!

Looking forward, can’t wait to See it :heart_eyes:

Looking awesome!

I am still (?) on the lookout for something that enables users to edit tables in a convenient way for most editors without html knowledge etc. Any way you see that being added in the future?

To make things clear; the editor isn’t mine (I’m not such a genius :slight_smile: ) - I only create the wrapper around the existing editor, for Kirby integration.

But the editor does support Markdown tables;

You enter the markdown on the left and will see the table live, on the right (when preview is enabled).

It’s not as userfriendly as WYSIWYG - but that’s markdown :stuck_out_tongue:

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 @HeinerEF 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.

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

1 Like