Kirby YAKME - yet another kirby markdown editor

Maybe you can just show this capture in order to demonstrate the power of Simple MDE…

The H button toggles all states :slight_smile: of course I can show all 6 H buttons but I don’t want the toolbar to become crowded (which is already the case… will fine-tune it in the next update).

1 Like

Hello! Nice field!
Just a question… how to style the output text with the same font, sizes etc… like the frontend? is there any way to add the frontend css to the backend preview? That could help a lot!
Thanks!

1 Like

It’s possible, yes

I will update the next version with this option.


- update - And it’s done.

What about select what buttons to include through the blueprint like the built in textarea field? Is that something you will add?

@jenstornell just asked this same question yesterday :wink:
Look here: Kirby YAKME - yet another kirby markdown editor
or just scroll a bit up.

Yes but I did not find an answer for it. :blush:

That’s an option :slight_smile:

I am building an option now, were the preview / editor field looks the same
like the real site (typographic, etc…).

With that option, you can also hide buttons if you want (as a quick
workaround).

But it’s on the bucketlist, and feel free to fork!

1 Like

Bumped the field to version 1.2.5.

The most important change is that you can now style both the editorfield and previewmode to “match” the design of your site (sort of, it’s rudimentary).

In order to do this simply add this code to config.php

c::set("panel.stylesheet", "assets/css/yakme.css");

This will load the yakme.css from your assetsfolder into the panel and fire it for the Yakme-field.

A demo-file is included in the repository; see the animation below.

Of course it’s a demo, just to show the possibilities; it’s not designed at all :slight_smile:
Consider the demo-file as a starting-point for your own adjustments / design.

Yuppi…!!! Great thank you!!!

Don’t forget to change the demo-css included… it’s ugly :stuck_out_tongue:

…something’s cookin’ :stuck_out_tongue:

1 Like

Get a new computer so you can record some decent GIFs!!

Just kiddin’ You’re rocking the place with YAKME !! Keep it up :wink:

I like old stuff… just build a brand new Android app for a client, using a 5 year old Android cell :slight_smile:

It’s working for me, so why buy new stuff…

2 Likes

Side-by-side mode… even prettier :slight_smile:

Will update it before, or after my holiday / vacation!

3 Likes

There is actually a way to configure the Heading button(s) in the toolbar. It is possible to display only H2 and H3 buttons, pretty much like in the visual-markdown plugin. It makes sense for me because the H1 is the page’s title.

I know there’s an option (I even used it in the kirby.js in the /js folder)

  • but “for the moment” I don’t want to change that much;

Everyone has another user-scenario and that comes with different wishes and
options… so for the moment, I just “wrap” the editor into Kirby, add
some extra functionality (live preview of a video) and that’s it.

But it’s work in progress; today I’ll release an update where you can set
all the individual buttons on the toolbar (hide / show) - so that’s a
start :slight_smile:

Please, feel free to change the code - anyway you want!

2 Likes

###UPDATE

You can hide show any button you in the blueprint;

  yakme_example:
    label: Yakme - Example
    type:  yakme

    hide:
      - bold
      - italic
      - heading
      - quote
      - list
      - list-ul
      - list-ol
      - table
      - divider
      - link
      - image
      - kirby
      - kirby-mail
      - kirby-link
      - kirby-image
      - kirby-video
      - typewriter
      - wysiwyg
      - preview
      - split
      - fullscreen

    show:
      - bold
      - italic
      - heading
      - quote
      - list
      - list-ul
      - list-ol
      - table
      - divider
      - link
      - image
      - kirby
      - kirby-mail
      - kirby-link
      - kirby-image
      - kirby-video
      - font
      - wysiwyg
      - preview
      - split
      - fullscreen

####EXPLAIN

| **Option**  | **Explain** |
| ----------- | -------- |
| bold        | Hide / show the bold / strong button |
| italic      | Hide / show the italic / em button |
| heading     | Hide / show the heading (H1, etc...) button |
| quote       | Hide / show the blockquote button |
| list        | Hide / show ALL list buttons |
| list-ul     | Hide / show the ul-list button |
| list-ol     | Hide / show the ol-list button |
| table       | Hide / show the table button |
| divider     | Hide / show the divider / hr button |
| link        | Hide / show the link button |
| image       | Hide / show the image button |
| kirby       | Hide / show ALL kirby-only buttons (the green ones) |
| kirby-mail  | Hide / show the kirby-mail button |
| kirby-link  | Hide / show the kirby-link button |
| kirby-image | Hide / show the kirby-image button |
| kirby-video | Hide / show the kirby-video button |
| typewriter  | Hide / show the font (monospace / proportional) button |
| wysiwyg     | Hide / show the WYSIWYG-button (experimental option) |
| preview     | Hide / show the preview button |
| split       | Hide / show the splitscreen-button |
| fullscreen  | Hide / show  the fullscreen-button|

Remember; even when a button is hidden, you can access it’s functionality by manually entering the markdown-code or pressing the shortcut (see later in this document) for it.

In order to avoid conflicts, when set both hide and show, show will always win (see example at Kirby YAKME - yet another kirby markdown editor - #58 by texnixe).


Also a (experimental) live preview of YouTube videos is added in the newest version.

1 Like

@1n3JgKl9pQ6cUMrW: Tables are not part of standard Markdown, and markdown extra tables are not supported in Discourse.

So I did fall back to the old ASCI solution :slight_smile:

Fortunately YAKME does support tables out of the box; can come in handy for some users.

1 Like

Hi @1n3JgKl9pQ6cUMrW

You wrote:

As graphic artist I want to point out that a serif font isn’t the same as a proportional font. :wink:

Better name the preferences:

  • monospaced and proportional

PS: I think this looks like a great plugin! :+1:

1 Like