Skip to content
WYSIWYG panel field for Kirby CMS
JavaScript PHP CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
field
.editorconfig
.gitattributes
.gitignore
AUTHORS
LICENSE
README.md
field-wysiwyg.php
package.json
screenshot.png

README.md

Kirby WYSIWYG

This additional panel field for Kirby 2 allows you to use a medium.com like visual inline editor in the Panel.

Authors: digital storytelling pioneers feat. Jonas Doebertin

License: GNU GPL v3.0

screenshot

Installation

Copy or link the field-wysiwyg directory to site/plugins/ or use the Kirby CLI kirby plugin:install storypioneers/kirby-wysiwyg.

Optional: Set some configuration options for Kirby WYSIWYG Editor in your sites config.php file. You can get an overview of all available options further down.

Usage

Post installation you can use it in your blueprints: simply replace the textarea fields with wysiwyg fields (where applicable).

fields:
	richtext:
		label: Text
		type:  wysiwyg

As content you create using Kirby WYSIWYG Editor is converted into valid markdown, there's nothing you have to change in your templates. Just use the wysiwyg content fields like your previous textarea fields:

<article>
	<h1><?= $page->title()->html() ?></h1>

	<!-- Just render your WYSIWYG Editor fields
	     like any other Kirbytext field. -->
	<?= $page->richtext()->kirbytext() ?>

</acticle>

Global Options

The Kirby WYSIWYG Editor Field has some global options that you might want to use to alter the fields functionality to suit your specific needs. Below you'll find a list of all available options which can be set from your projects global config.php file.

field.wysiwyg.buttons

Define a list of buttons to display in the editor toolbar. Currently supported button types are: bold, italic, underline, strikethrough, subscript, superscript, anchor, quote, pre, orderedlist, unorderedlist, h1, h2, h3, h4, h5, h6, and removeFormat. Please note that the order in which you list the button names relates to the display order in the toolbar.

field.wysiwyg.heading-style

Define your preferred heading style. Choose between setext (underlined) or atx (# Heading 1 and ## Heading 2). Please note that this only affects H1 and H2 headings. All headings of lower priority will always use the ATX style.

Per Field Options

In addition to the global options explained above, the field offers some options that can be set from a per field basis directly from your blueprints. Please note that these per field options always overwrite global options you might have specified.

buttons

Define a list of buttons to display in the editor toolbar. Currently supported button types are: bold, italic, underline, strikethrough, subscript, superscript, anchor, quote, pre, orderedlist, unorderedlist, h1, h2, h3, h4, h5, h6, and removeFormat. Please note that the order in which you list the button names relates to the display order in the toolbar.

fields:
	richtext:
		label: Text
		type:  wysiwyg
		buttons:
			- bold
			- italic
			- anchor

headingstyle

Define your preferred heading style. Choose between setext (underlined) or atx (# Heading 1 and ## Heading 2). Please note that this only affects H1 and H2 headings. All headings of lower priority will always use the ATX style.

fields:
	richtext:
		label: Text
		type:  wysiwyg
		headingstyle: setext
You can’t perform that action at this time.