Maybe you can just show this capture in order to demonstrate the power of Simple MDE…
The H button toggles all states 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).
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!
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
Of course it’s a demo, just to show the possibilities; it’s not designed at all
Consider the demo-file as a starting-point for your own adjustments / design.
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
Please, feel free to change the code - anyway you want!
| **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.