How to add a plugin to a CKEditor 5?

Question

I am learning how to use CKEditor 5 and how to add plugins to the editor. I have been trying to follow the instructions provide in CKEditor Ecosystem Documentation but i'm getting error while integrating Word Count Plugin

I have downloaded the plugins from GitHub into plugins folder locally.

 CKEditor 
 |---ckeditor.js
 |---ckeditor.js.map
 |---translations (folder)
 |---plugins(folder) 
     |---ckeditor5-word-count (folder)
         |---src (folder)
             |---wordcount.js

I don't know exactly how it would be the right way to install this plugin from CKEditor 5 itself locally without having to download it from the internet (with npm install from npm repository). I am well aware that I am doing something wrong, but I cannot identify what it is.

I would appreciate if anyone could give me tips, alternatives, and of course, maybe a solution. I've been trying for a few days now, and I don't know what I can and can't do anymore. I would be really grateful if someone could help me.

$(function() {   
    var editorTextarea
    ClassicEditor.create( document.querySelector( '#cktext' ),{
            
        } )
        .then (editor => {
            editorTextarea = editor;                            
        })
        .catch( error => {
            console.error( error );
        } );
    
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>

<form class="test-form-horizontal" id="testform" role="form" >
  <div class="row">
   <div class="col-sm-12">
     <label for="ckname">Name*:</label> 
     <input name="ckname" class="form-control" id="ckname" />
   </div>
   <div class="col-sm-12"><p>&nbsp;</p></div>

   <div class="col-sm-12">
     <label for="cktext">CkEditor*:</label> 
     <textarea class="form-control ckeditor" name="cktext" id="cktext"></textarea>
   </div>

   <div class="col-sm-12"><p>&nbsp;</p></div>
   </div>
  <button type="submit" class="btn btn-default btn-success">Submit</button>
  </form>

Answer 1

The way CKEditor was designed means that you can not change what plugins appear in your editor just by changing the HTML in your web page.

You need to have a 'build' (a collection of Javascript files) that have all the plugins you need inside them, then you can adjust what parts of that build appears in your web editor by adjusting your HTML.

The default way - Builds

CKEditor5 has five ready-to-use builds. Each is a different type of editor (classic, pop-up, etc.). For each they have chosen which plugins that they think most people will find useful. I'm guessing you used one of these builds above.

Documentation on how to use their builds - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html

The long way - Framework

To create your own custom build you need to use Node.js and learn how the CKEditor5 'Framework' works. Usually you fork an existing build from GitHub, adjust the configuration to add more plugins in, then build it.

Here is the overview https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html

There is a lot of documentation on using the Framework - https://ckeditor.com/docs/ckeditor5/latest/framework/guides/overview.html

The quick way - Online Builder

Luckily they have a middle option. You can choose your plugin options on their website and it will automatically build it for you and give you a ZIP download file - https://ckeditor.com/ckeditor-5/online-builder/

I tried building an editor with the Word Count plugin included. It looks like the code is in the build, but you will need to write some HTML/Javascript to access it (as described in the plugin documentation - https://ckeditor.com/docs/ckeditor5/latest/features/word-count.html )

NB: I recommend removing the CKFinder CKFinder Upload Adapter and Cloud Services plugins as they need a cloud subscription which means you can't download the ZIP file straight away.

Why is it so complex?

Their focus was on building a very flexible system, the downside is that it became quite complex. They talked about their approach when v5 came out in 2017 (near the end) - https://ckeditor.com/blog/CKEditor-5-A-new-era-for-rich-text-editing/