Introduction

In this short course we will learn how to extend the CKEd­i­tor field that is a first-par­ty plu­g­in avail­able for Craft CMS ver­sion 5. 

In the Craft 5 com­pat­i­ble ver­sion of the CKEd­i­tor plu­g­in, not every CKEd­i­tor plu­g­in is avail­able for us to use. CKEd­i­tor ships with plu­g­ins that aren’t avail­able to us, and I’d like to imple­ment them. 

Look­ing at the plu­g­ins avail­able in the Craft CMS ver­sion of CKEd­i­tor, we see the fol­low­ing plu­g­ins included:

    "@ckeditor/ckeditor5-alignment": ">=41.0.0",
    "@ckeditor/ckeditor5-autoformat": ">=41.0.0",
    "@ckeditor/ckeditor5-basic-styles": ">=41.0.0",
    "@ckeditor/ckeditor5-block-quote": ">=41.0.0",
    "@ckeditor/ckeditor5-code-block": ">=41.0.0",
    "@ckeditor/ckeditor5-core": ">=41.0.0",
    "@ckeditor/ckeditor5-dev-translations": "^39.5.1",
    "@ckeditor/ckeditor5-editor-classic": ">=41.0.0",
    "@ckeditor/ckeditor5-essentials": ">=41.0.0",
    "@ckeditor/ckeditor5-find-and-replace": ">=41.0.0",
    "@ckeditor/ckeditor5-font": ">=41.0.0",
    "@ckeditor/ckeditor5-heading": ">=41.0.0",
    "@ckeditor/ckeditor5-horizontal-line": ">=41.0.0",
    "@ckeditor/ckeditor5-html-embed": ">=41.0.0",
    "@ckeditor/ckeditor5-html-support": ">=41.0.0",
    "@ckeditor/ckeditor5-image": ">=41.0.0",
    "@ckeditor/ckeditor5-indent": ">=41.0.0",
    "@ckeditor/ckeditor5-inspector": ">=4.1.0",
    "@ckeditor/ckeditor5-language": "^41.0.0",
    "@ckeditor/ckeditor5-link": ">=41.0.0",
    "@ckeditor/ckeditor5-list": ">=41.0.0",
    "@ckeditor/ckeditor5-media-embed": ">=41.0.0",
    "@ckeditor/ckeditor5-package-tools": "^1.1.0",
    "@ckeditor/ckeditor5-page-break": ">=41.0.0",
    "@ckeditor/ckeditor5-paragraph": ">=41.0.0",
    "@ckeditor/ckeditor5-paste-from-office": ">=41.0.0",
    "@ckeditor/ckeditor5-remove-format": ">=41.0.0",
    "@ckeditor/ckeditor5-select-all": ">=41.0.0",
    "@ckeditor/ckeditor5-source-editing": ">=41.0.0",
    "@ckeditor/ckeditor5-style": ">=41.0.0",
    "@ckeditor/ckeditor5-table": ">=41.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^41.0.0",
    "@ckeditor/ckeditor5-upload": ">=41.0.0",
    "@ckeditor/ckeditor5-word-count": ">=41.0.0",

But, look­ing at the CKEd­i­tor source code, there are addi­tion­al plu­g­ins or pack­ages available:

Here are three plu­g­ins I’d like to add and make avail­able to Craft: 

1. High­light, which allows you to high­light text in dif­fer­ent colors, 
2. Mark­down GFM, which allows you to type or paste in Mark­down and have it auto­mat­i­cal­ly con­vert­ed to CKEd­i­tor rich text, and 
3. Men­tion, which allows you to @ a pre­set list of names. 

The abil­i­ty to add plu­g­ins doesn’t end there. We can also add third-par­ty plu­g­ins, includ­ing a com­plete­ly cus­tom plu­g­in we cre­ate ourselves. 

That all sounds well and good, but how do we access CKEd­i­tor in order to add a first- or third-par­ty plu­g­in? CKEd­i­tor is includ­ed in Craft via a plu­g­in; what are our options?

For­tu­nate­ly, we can use a Craft mod­ule to hook into the CKEd­i­tor Craft plu­g­in by reg­is­ter­ing a spe­cial type of asset bun­dle called CKEd­i­tor pack­age asset. This tells Craft’s CKEd­i­tor where to look for the CKEd­i­tor pack­ages it needs to load and make avail­able. We’ll do this inside of a Craft module.

We will use two dif­fer­ent types of CKEd­i­tor plu­g­ins: those that are exe­cutable as tool­bar items and those that func­tion with­in or around the edi­tor itself.

At the end of the course, we’ll have suc­cess­ful­ly accom­plished the following:

1. Learn gen­er­al­ly about how CKEd­i­tor plu­g­ins work, and how we can extend CKEd­i­tor with­in a Craft CMS project. 
2. Extend CKEd­i­tor using an first-par­ty plu­g­in that isn’t already includ­ed in the default Craft CKEd­i­tor default setup.
3. Extend CKEd­i­tor using a third-par­ty plu­g­in that isn’t already includ­ed in the default Craft CKEd­i­tor setup.
4. Extend CKEd­i­tor using a cus­tom CKEd­i­tor plu­g­in — detail TK
5. Along the way, we’ll become more famil­iar with using a mod­ule to cus­tomize and extend our Craft CMS projects.

For most peo­ple, adding a first- or third-par­ty CKEd­i­tor plu­g­in is prob­a­bly enough but we’ll wrap up the course with a short tuto­r­i­al on how to cre­ate your own cus­tom CKEd­i­tor plugin.