TinyMCE Wysiwyg Editor

Plugins Kirby 3 plugin šŸ§©
1

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

preview

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

@ahmetbora is it possible to define custom formats within this plugin?

3

Can you explain or give an example of ā€œdefining custom formatā€?

4

Being able to add custom options to the format select drop down in the toolbar.

5

Thanks for point out. Not possible yet but let me try to make enhancement about that.

6

Version 1.2.0

:tada: Features

  • Now the TinyMCE plugin extendable (check out read me for details)
1 Like
7

@ScreenRes Iā€™ve released new version that includes extendable feature. I hope works for you.

8

Amazing @ahmetbora, Iā€™m gonna have to give it a go now.

1 Like
9

This looks great! Would it be at all possible to see a few more screenshots? Iā€™m specifically interested in how the insertion of links and images work, to understand if it is possible to:

  • Insert links to internal pages, by selecting the page from a dropdown.
  • Uploading a file to insert a link to.
  • Uploading and inserting an image. (Also, does it resample resized files?).

Thanks!

10

tinymce

@purplespider Feel free to write contact@owebstudio.com, if you need more information or a demo to test.

1 Like
11

Is there a way to include as a block?

Sometimes blocks are nicer for layout options and it would be awesome to have this as a block.

12

This is a field. You can use it wherever you want. Inside an object field, a block field or a structure field.

1 Like
13

Okay, thank you.

So I would have to create a custom block type and place the field within it, correct?

14

I figured it out. It is like this (pretty slick). Iā€™m loving Kirby!

blocks:
  label: Page Content
  type: blocks
  fieldsets:
    - code
    - image
    fulleditor:
      name: Text Editor
      icon: bolt
      fields:
        editor:
          type: tinymce
1 Like
15

How do I output in the page template? The ā€œtoBlocks()ā€ is not outputting what is placed within the tinymce.

16

You need to create block file to render/output the block with the field like following:

<!-- /site/snippets/blocks/fulleditor.php -->
<div id="<?= $block->id() ?>" class="editor">
  <?= $block->editor() ?>
</div>
1 Like
17

Worked perfect!

18

Hello,

is it possible to use the plugin without the cloud and change the language?

thank you in advance

19

Neither is possible, but I will think about the changing language.

20

@Musikschule_Frohlich Wait a minute! You need to be able to change the language with the new feature (extendable) in 1.2.0. Something like that:

panel.plugin("owebstudio/tinymce-extend", {
    thirdParty: {
        tinymce: {
            language: 'de',
            language_url : '/languages/de.js'  // site absolute URL
        }
    }
});

TinyMCE Documentation: Localization options | Docs | TinyMCE