Search code examples
angularckeditor

How to install CKEditor 4 plugin to angular


I am using Angular 8 framework with CKeditor to build my application.

I have installed the Ckeditor angular module, it works fine.

However, it does not show the font colour button.

According to the web page, I need to install both the Color button and Panel Button plugin to make it works.

Unfortunately, I don't know how to install these plugins. Would you tell me how to do so?

PS: Here is my "config" variable:

this.config.toolbarGroups = [
              { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
              { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
              { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
              { name: 'forms', groups: [ 'forms' ] },
              { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
              { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
              { name: 'links', groups: [ 'links' ] },
              { name: 'insert', groups: [ 'insert' ] },
              { name: 'styles', groups: [ 'styles' ] },
              { name: 'colors', groups: [ 'colors' ] },
              { name: 'tools', groups: [ 'tools' ] },
              { name: 'others', groups: [ 'others' ] },
              { name: 'about', groups: [ 'about' ] }
            ];
            this.config.removeButtons = 'Forms,Anchor,Underline,Strike,Subscript,Superscript,Link,Unlink,Styles,About,HorizontalRule,Blockquote,Italic,SpecialChar,Format,Outdent,NumberedList,Indent,BulletedList,RemoveFormat,Bold,PasteFromWord';
            this.config.extraPlugins = 'colorbutton';

Solution

  • The easiest way is to:

    introduce full.js at index.html.

    <script src="https://cdn.ckeditor.com/4.15.0/full-all/ckeditor.js"></script>
    

    please look this page