€29.99 €39.99

TinyMCE Editor

TinyMCE Wysiwyg Editor

Overview

Integrates the powerful TinyMCE 5 wysiwyg editor into Kirby.

€29.99 - Buy now
14-Day Money Back Guarantee!
Already got the plugin? Click to access to your orders

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

preview

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

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

Move Pages

WhatsApp Button

Do you need custom plugin?

We will be happy to assist you by writing to us about your needs.
GET IN TOUCH contact@owebstudio.com