Ckeditor5: How can i change all images src atributes inserted in editor?

[leonardovillela]

Hello, i have a scenario that i need to use presigned url to download images. So, i do a request for my backend for every url attributes in images and get the presigned url, that is the real image url. How can i do this in CKEditor5?

I think need to get all images url that will generate the presignedurl and replace the url attribute of all tags in the editor.

[Mgsy]

@oleq, can you take a look at it?

[oleq]

I'm not sure I understand the problem.

To start off, where do you get the images from? Do you drop/paste them into the editor?

[jodator]

You can use walker (check the example there) to iterate over a whole document.
Then check if value.item.is( 'image' ) and then update it's 'source` attribute:

model.change( writer => {
    const walker = ...
    // the for loop around ofcourse:
    writer.setAttribute( 'source', value.item.getAttribute( 'source' ) + 'signed_part', value.item );
} );

[leonardovillela]

I have a scenario where i use S3 presigned url to upload and download images inserted by user in ckeditor5. To upload i use my own implementation of UploadAdapter, but to ckeditor5 image tag download, they can't use presigned url. Because the browser do the image request and don't send the credentials header to my back-end.

[oleq]

Still, I'm not 100% sure I understand the use–case but you can try this plugin:

function PreSignImageUrls( editor ) {
    editor.conversion.for( 'downcast' ).add( dispatcher => {
        dispatcher.on( 'attribute:src:image', ( evt, data, conversionApi ) => {
            console.log( evt, data );
            const viewWriter = conversionApi.writer;
            const viewFigure = conversionApi.mapper.toViewElement( data.item );
            const viewImage = viewFigure.getChild( 0 );

            viewWriter.setAttribute( 'src', data.attributeNewValue + '?foo=bar', viewImage );
        }, { priority: 'low' } );
    } );
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ..., PreSignImageUrls ],
        toolbar: [ 'heading', '|', 'undo', 'redo' ]
    } )
    .then( editor => {
        window.editor = editor;
    } )
    .catch( err => {
        console.error( err.stack );
    } );

[leonardovillela]

That is, thank you.

[JMA12]

Still, I'm not 100% sure I understand the use–case but you can try this plugin:

function PreSignImageUrls( editor ) {
  editor.conversion.for( 'downcast' ).add( dispatcher => {
      dispatcher.on( 'attribute:src:image', ( evt, data, conversionApi ) => {
          console.log( evt, data );
          const viewWriter = conversionApi.writer;
          const viewFigure = conversionApi.mapper.toViewElement( data.item );
          const viewImage = viewFigure.getChild( 0 );

          viewWriter.setAttribute( 'src', data.attributeNewValue + '?foo=bar', viewImage );
      }, { priority: 'low' } );
  } );
}

ClassicEditor
  .create( document.querySelector( '#editor' ), {
      plugins: [ ..., PreSignImageUrls ],
      toolbar: [ 'heading', '|', 'undo', 'redo' ]
  } )
  .then( editor => {
      window.editor = editor;
  } )
  .catch( err => {
      console.error( err.stack );
  } );

Hi, @oleq how can i run this in editor.OnInit?