Ckeditor5-angular: Could not add Highlight plugin in ckEditor classic build

[kapilthakkar2912]

Hello,

I'm trying to add Highlight plugin but its how to unavailable.
I have installed that plugin still same console message found.

Version Details:
Angular 7
ckEditor 5

[Mgsy]

Hi, you should prepare your custom build with the highlight plugin. Please, take a look at our installing plugins guide.

[kapilthakkar2912]

Thanks @Mgsy.

But in custom build image related option not working(imageStyle:alignLeft,imageStyle:alignRight) .

[Mgsy]

But in custom build image related option not working(imageStyle:alignLeft,imageStyle:alignRight) .

Can you check whether there is some error in the console?

Anyway, did you define image styles and toolbar config? At first, you should import the ImageToolbar and ImageStyles plugins, then set the configuration:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        image: {
            // You need to configure the image toolbar, too, so it uses the new style buttons.
            toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' 
        ],

            styles: [
                // This option is equal to a situation where no style is applied.
                'full',

                // This represents an image aligned to the left.
                'alignLeft',

                // This represents an image aligned to the right.
                'alignRight'
            ]
        }
    } )
    .then( ... )
    .catch( ... );

Please, take a look at the image plugin documentation.

[kapilthakkar2912]

Hello @Mgsy ,
I have added following imports,

import BaseEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';

and following code in .js file.

export default class ClassicEditorWithRealTimeCollaboration extends BaseEditor {}

ClassicEditorWithRealTimeCollaboration.builtinPlugins = [
    Alignment,
    Autoformat,
    BlockQuote,
    Bold,
    EasyImage,
    Essentials,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Italic,
    Link,
    List,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    Strikethrough,
    Table,
    TableToolbar,
    Underline,
    UploadAdapter
];

ClassicEditorWithRealTimeCollaboration
    .create( document.querySelector( '#editor' ), {
        image: {
            // You need to configure the image toolbar, too, so it uses the new style buttons.
            toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' 
        ],

            styles: [
                // This option is equal to a situation where no style is applied.
                'full',

                // This represents an image aligned to the left.
                'alignLeft',

                // This represents an image aligned to the right.
                'alignRight'
            ]
        }
    } )
    .then(  )
    .catch( );
ClassicEditorWithRealTimeCollaboration.defaultConfig = {
    toolbar:{ 
        items :[
        'heading',
        '|',
        'fontsize',
        'fontfamily',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'removeFormat',
        'highlight',
        '|',
        'alignment',
        '|',
        'numberedList',
        'bulletedList',
        '|',
        'link',
        'blockquote',
        'imageUpload',
        'insertTable',
        '|',
        'undo',
        'redo',
    ],
    viewportTopOffset: 118,
}

};

still not working for me.

[Mgsy]

The code should be added to the editor configuration, in your case it will be ClassicEditorWithRealTimeCollaboration.defaultConfig. I've modified your code:

export default class ClassicEditorWithRealTimeCollaboration extends BaseEditor {}

ClassicEditorWithRealTimeCollaboration.builtinPlugins = [
    Alignment,
    Autoformat,
    BlockQuote,
    Bold,
    EasyImage,
    Essentials,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Italic,
    Link,
    List,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    Strikethrough,
    Table,
    TableToolbar,
    Underline,
    UploadAdapter
];

ClassicEditorWithRealTimeCollaboration.defaultConfig = {
        image: {
            // You need to configure the image toolbar, too, so it uses the new style buttons.
            toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' 
            ],

            styles: [
                // This option is equal to a situation where no style is applied.
                'full',

                // This represents an image aligned to the left.
                'alignLeft',

                // This represents an image aligned to the right.
                'alignRight'
            ]
        },
    toolbar: { 
        items :[
        'heading',
        '|',
        'fontsize',
        'fontfamily',
        '|',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'removeFormat',
        'highlight',
        '|',
        'alignment',
        '|',
        'numberedList',
        'bulletedList',
        '|',
        'link',
        'blockquote',
        'imageUpload',
        'insertTable',
        '|',
        'undo',
        'redo',
    ],
    viewportTopOffset: 118,
    }

};

[kapilthakkar2912]

Hello @Mgsy ,

Thank you for your quick replay.
Still image toolbar is not working for me.

can you provide any demo link ?

Best Regards.
Thank you.

[Mgsy]

Still image toolbar is not working for me.

Did you rebuild the editor (npm run build in the main folder)? Do you have any errors in the console?

[kapilthakkar2912]

Hello @Mgsy,
I have rebuild twice in /vendor/ckeditor5/ folder and no any error found in console.

[Mgsy]

I'm sorry, but I can't reproduce your issue.

As I see you use a code from our CKEditor 5 with real-time collaboration for the angular sample. It has Highlight plugin enabled by default, as well as configured image styles.

Please, clone the repository once again and follow the instructions in README - https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-angular.

If you don't want to work on our sample, here is a CKEditor 5 and Angular integration guide, so you'll be able to integrate it on your own.

[kapilthakkar2912]

i'll test and let you know.

Thank you for your quick replay.

Thank you!

[kapilthakkar2912]

I have used "https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-angular." build and its working fine.

Thanks @Mgsy !