CKEditor 4 : How to add custom plugin like word count while building from CkEditor CDN in Angular?

[Kitwradr]

Type of report

Docs

Provide a description of requested docs changes

What is the purpose and what should be changed?

I am using the default CDN of CKEditor angular to use it in my application. However I have a need to limit the number of characters in the editor for which I found this wordcount plugin which is not there in any of CDNs - basic or standard version

How do I add this plugin in my application?

Found this blog to add local plugins but unable to make this work. Any suggestions if this is the right way to go about this?

If I add word count in config of angular I get this error

Object literal may only specify known properties, and 'wordcount' does not exist in type 'config'.

  53             wordcount : {
                   ~~~~~~~~~~~~~
    54                 maxCharCount: 100,
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    55             },
       ~~~~~~~~~~~~~

[Kitwradr]

Linking this issue with same question on stack overflow

[jacekbogdanski]

@Kitwradr I see that it's the same issue as for Vue integration, so we are not exposing any API notifying about loaded CKEDITOR namespace which would allow you to add an external plugin. Please, see https://github.com/ckeditor/ckeditor4-vue/issues/60#issuecomment-691046491 for a workaround tip. The issue should be resolved with https://github.com/ckeditor/ckeditor4-angular/issues/143 so I'm closing it as duplicate.

[Kitwradr]

Hi @jacekbogdanski although I see you have given an example in Vue JS, I'm not able to visualize the solution in angular. It would be incredibly helpful if you give the workaround example in Angular as well :)

[jacekbogdanski]

You can just use your index.html page to explicitly load CKEditor 4 via CDN and add an additional, external plugin:

<script src="https://cdn.ckeditor.com/4.15.0/full/ckeditor.js"></script>
<script>
    CKEDITOR.plugins.addExternal('wordcount', '/path-to-local-plugin/plugins/wordcount/', 'plugin.js');
</script>
<app-root></app-root>

and in Angular component:

<ckeditor [config]="{ extraPlugins: 'wordcount' }">

In case when CKEDITOR namespace is already loaded, the internal script won't overwrite it with CDN version.