How can I add custom attribute and class on an Image after upload?

[martonx]

Provide a description of the task

I have a custom Image upload logic, what is working. But when I upload an image I would like to add a custom attribute and a custom class to the image.
So my image should be like this after uploading:

<img class="lazy-load" data-src="https://test.com/image.jpg" />

But by default the image seems like this after uploading:

<img src="https://test.com/image.jpg" />

I read the documentation (and googled), so finally I created a small converter for image to preserve my custom data-src attribute. So preserving is working, but I don't know how to add it after insert image?

My code:

`import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import { modelToViewAttributeConverter } from '@ckeditor/ckeditor5-image/src/image/converters';

import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [ Essentials, Paragraph, Image, ImageInsert ],
toolbar: [ 'imageInsert' ]
})
.then(editor => {
console.log('Editor was initialized', editor);

    CKEditorInspector.attach('editor', editor);

    // Expose for playing in the console.
    window.editor = editor;
    
    editor.model.schema.extend('image', {
        allowAttributes: ['data-src']
    });
    
    const conversion = editor.conversion;
    conversion.for('downcast').add(modelToViewAttributeConverter('data-src'));
    conversion.for('upcast').attributeToAttribute( {
        view: {
            name: 'img',
            key: 'data-src'
        },
        model: 'data-src'
    });
})
.catch(error => {
    console.error( error.stack );
});`

And my index.html

<div id="editor"> <p>This is some sample content.</p> <img class="lazy-image" src="https://ckeditor.com/docs/assets/img/ckeditor-5.svg" alt="CKEditor5 logo" data-src="https://ckeditor.com/docs/assets/img/ckeditor-5.svg" /> </div>

What steps should be taken to fulfill the task?

Please advice, how can I add custom attribute and class after image uploading?

📃 Other details

• Browser: any
• OS: any
• CKEditor version: 25.0.0
• Installed CKEditor plugins: nothing

[Mgsy]

Hi! You can use e.g. DowncastDispatcher for listening on the image insertion and use DowncastWriter to add a proper class to your <figure> element (which by default wraps <img> element):

        editor.conversion.for( 'downcast' ).add( dispatcher => {
            dispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
                // Remember to check whether the change has not been consumed yet and consume it.
                if ( conversionApi.consumable.consume( data.item, 'insert' ) ) {
                    return;
                }
                const writer = conversionApi.writer;

                const viewFigure = editor.editing.mapper.toViewElement( data.item );

                writer.addClass( 'lazy-load', viewFigure );

                // Remember to stop the event propagation.
                evt.stop();
            } );
        } );

[Elawphant]

How about the attributes?
The src needs to be converted to data-src .
getAttributes() is useless as it outputs the attributes of the emptyElement class, and getIdentity() method returns a plain img without any attributes.
Any suggestion?

[abhisheksahore]

I am trying t add "title" attribute in tag but ckeditor is stripping title attribute. I'm using ckeditor5. how to resolve this issue?
@Mgsy

[darylteo]

Try this @abhisheksahore #5204