README

Kirby TinyMCE Field

Integrates the powerful TinyMCE 5 wysiwyg editor into Kirby.

All the documentation about TinyMCE 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
^5.0	^2.0

Installation

Download the latest release
Unzip downloaded file
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

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'}
            ]
        }
    }
});

License

TinyMCE Editor is a commercial plugin. It is free to use on your local computer and on staging sites. A live site needs a license key: buy a license and activate it with the button in the field's notice, or in the Panel's System view (Kirby 5 and newer) by clicking the license status of the plugin.

Without a license key, the editor is read-only on a live site and shows a notice. Your content stays visible and your website keeps working.

oweb studio Commercial License. Versions released under the MIT license stay MIT. The current license is available at https://github.com/owebstudio/.github/blob/main/LICENSE.md.

TinyMCE itself is loaded from Tiny Cloud and needs your own API key, see Options.

owebstudio / kirby-tinymce-field

Package info

Security

Statistics