You are currently viewing Extend CKEditor in TYPO3 with Add-Ons

Extend CKEditor in TYPO3 with Add-Ons

One of the features of CKEditor is that it has an API, which allows to extend the editor with more functionality. In this post I will show you, how you can add CKEditor plugins to the TYPO3 implementation.

The last post about CKeditor  was about the basic configuration of the editor. Todays post is about how to extend the editors functionality with add-on. There are only four steps to add more functionality to the new RTE CKEditor in TYPO3.

Provide a place to serve the add-on

There must be a place where the add-on will be loaded from. This might be an existing template extension or, in case it should be published on the TER (TYPO3 Extension Repository), a slim extension.

Basically such an add-on provider extension only must include

  • ext_emconf.php
  • composer.json (if it should be installable via composer, which is highly recommended)
  • the plugin code in the directory “Resources/Public/JavaScript/Plugins/”
  • the editor configuration in “Configuration/RTE” ans
  • an extension icon

Provide the js code

The add-on sources must reside in the directory Resources/Public/JavaScript/Plugins/. The file and directory structure must be copied to here without any modification as the javascript code depends on this structure.

Provide the RTE config

The second step is to provide the rte config and to tell the CKEditor where to find the add-on. It is a very small yaml file with the following content:

# Register <myplugin> for ckeditor
editor:
  externalPlugins:
    <myplugin>:
      resource: "EXT:your_extension_name/Resources/Public/JavaScript/Plugins/your_plugin.js"
      <my_config_option>: <my_config_value>

It is possible to provide more than one plugin. This is done by repeating the <myplugin> section with other values.

If other values than the default values of the provided plugin, these must be set on the same level as the value for “resource”.

Import the config in a RTE preset

The following yaml configuration must be inserted into a preset, that can be applied in an installation and be happy to use it.

imports:
  - resource: { "EXT:rte_ckeditor_myplugin/Configuration/RTE/Plugin.yaml" }

editor:
  config:
    <myplugin>:
      <my_config_option>: <my_config_value>

Currently the configuration of your preset of an plugin will be always overwritten. This is IMHO a bug. I filed a report on forge and also provided a patch to fix this on review.typo3.org. (I’d be happy if you could review and test the patch ;-) ) .

Example extension

Often it is easier to have a working example. So I created an extension, which is available at github. It provides the wordcount add-on, which is able to show several metrics about words, characters and paragraphs, while typing the content.

The add-on itsself resides at http://ckeditor.com/addon/wordcount. The extension can be installed via composer or can be downloaded from github.

Conclusion

Thanks to Riccardo di Contardi, who pointed me to this topic, which was on my mind since a couple of weeks.

Thanks to Netresearch, who published an add-on extension for the CKEditor, which allows you to add images within the CKEditor. It is available on Github and via TER. This extensions served me as some kind of blue print for the example on github. Thank you!

I hope, that this post has been interesting for you. If so or if you know somebody, who will profit from it, please share this post via your favorite social network. For your convenience I added some share buttons at the end of this page.

Credits
I found the blogpost image on unsplash. It was created by Sergey Zolkinand published unter the “Unsplash license“. I modified it using the service of Pablo on Buffer 
 

This Post Has 6 Comments

  1. Thomas CRENN

    Hi Marcus,

    First, your article is realy nice and full of amazing informations.

    I tried to instal the extension you provide at the end of the article, but it doesn’t seem to work, I don’t know is there is a specific TSconfig configuration to add on the site.

    I use Typo3 v8.7.3, maybe the problem is from here too

    What I want is to be able to configure CKeditor, and if I understood correctly, I have to make an extension so I thought yours would be a good starting point.

     

  2. Anonymous

    5

  3. Martin

    Hi Marcus,

    I tried your ext-way and think, the config was overwritten again. cause I did not install the your patch. But while trying, I found another quite easy way. Ich wrote an article about CKEditor without extension (only in german) and added a extension free way to include plugins. Nice feature: You can provide different user groups different plugins. Have a look: Konfiguration des CKEditors ohne Extension

    tschüss
    Martin

  4. Anonymous

    2.5

  5. Anonymous

    0.5

  6. Anonymous

    4.5

Leave a Reply