Kirby TinyMCE Field

Integrates the powerful TinyMCE 5 wysiwyg editor into Kirby.

All the documentation about Plates template engine is in the official documentation. You can find information in documents about getting API KEY: Quick start

Kirby compatibility table

Kirby version	Compatible plugin version
^3.6	^1.0
^4.0	^2.0

Installation

1. Download the latest release
2. Unzip downloaded file
3. Copy/paste unzipped folder in your /site/plugins folder

Usage

fields:
    text:
        type: tinymce
        label: "Content"
        placeholder: "Enter text.."
        height: 750

Options

Option	Type	Description
apiKey	string	API Key for TinyMCE (required)
height	int string	Sets the height of the entire editor, including the menu bar, toolbars, and status bar.
imageAdvanceTab	boolean	Advanced tab to the image dialog allowing you to add custom styles, spacing and borders to images.
menubar	string boolean	Allows you to specify which menus should appear and the order that they appear in the menu bar at the top of TinyMCE.
placeholder	string	Adds placeholder content that will be shown when the editor is empty.
plugins	array	Used to include plugins for the editor. Check out more open source plugins.
toolbar	string array	Allows you to specify the buttons and the order that they will appear on TinyMCE’s toolbar

All the values can be updated in the config.php file with prefixed owebstudio.tinymce.

Defaults

Option	Default
apiKey	null
height	500
imageAdvanceTab	true
menubar	file edit view insert format tools table tc help
placeholder	null
plugins	['advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount']
toolbar	undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter | alignright alignjustify | bullist numlist outdent indent | removeformat | code fullscreen

Sample options

<?php

// /site/config/config.php
return [
    'owebstudio.tinymce' => [
        'apiKey' => 'YOUR_API_KEY',
        'height' => 750
    ]
];

Extending the plugin

If you want to extend the TinyMCE instance, you can do it by creating a sample plugin like the example below:

Custom formatting examples

• https://www.tiny.cloud/docs/demo/format-custom/
• https://www.tiny.cloud/docs/configure/content-formatting/

Sample plugin

panel.plugin("owebstudio/tinymce-extend", {
    thirdParty: {
        tinymce: {
            formats: {
                // Changes the default format for h1 to have a class of heading
                h1: {block: 'h1', classes: 'heading'}
            },
            style_formats: [
                // Adds the h1 format defined above to style_formats
                {title: 'My heading', format: 'h1'}
            ]
        }
    }
});