How to replace img tag with pitcure tag in summernote?

Question

I am trying to replace img tag with picture tag in editor.

Editor adding url like : <img src="http://localhost/news/uploads/large/6dBUlfZZBW.webp"> With the following code on upload success :

success: function(url) {
   var image = $('<img>').attr('src','http://' +url);
   $('#summernote').summernote("insertNode", image[0]);
}

And I want to change it to picture tag like this :

<picture>
  <source media="(min-width: 400px)" srcset="uploads/large/JS60y3eMKG.webp" type="image/webp">
  <source media="(max-width: 300px)" srcset="uploads/medium/JS60y3eMKG.webp" type="image/webp">
  <source media="(max-width: 200px)" srcset="uploads/small/JS60y3eMKG.webp" type="image/webp">
  <img src="uploads/small/JS60y3eMKG.webp" alt="test">
</picture> 

Note: all images has same names but different folders, and I am using v8.20 here is the minified version if anyone wanna take a look :

Here is the complete setup demo

Answer 1

You can create a picture tag straight from the string, that is obvously unsafe.

const picture = $(`<picture>
    <source media="(min-width: 400px)" srcset="uploads/large/JS60y3eMKG.webp" type="image/webp">
    <source media="(max-width: 300px)" srcset="uploads/medium/JS60y3eMKG.webp" type="image/webp">
    <source media="(max-width: 200px)" srcset="uploads/small/JS60y3eMKG.webp" type="image/webp">
    <img src="uploads/small/JS60y3eMKG.webp" alt="test">
</picture>`)

And just insert it like you did with an image

$('#summernote').summernote("insertNode", picture[0])

It would be safer to split them into components.

const picture = $('<picture>')
const source1 = $('<source>').attr('srcset', url).attr('media', size)
const source2 = $('<source>').attr('srcset', url).attr('media', size)
const source3 = $('<source>').attr('srcset', url).attr('media', size)
const img = $('<img>').attr('src', url)
picture.append(source1, source2, source3, img)
$('#summernote').summernote("insertNode", picture[0])

Now you can iterate through your ajax response and dynamically create and add new source's to a picture.

Answer 2

This is a three part problem,

First is to find a way to insert custom markup stuff, then to update image to upload functionality and finally update image from link functionality.

Here is a working demo, https://codepen.io/shramee/pen/jOZVbxV?editors=0010

The solution

1. Function to insert markup

function addImageToSummerNote( imageUrl ) {
  var HTMLstring =
        '<picture>' +
        '<source media="(min-width: 400px)" srcset="' + imageUrl + '" type="image/webp">' +
        '<source media="(max-width: 300px)" srcset="' + imageUrl + '" type="image/webp">' +
        '<source media="(max-width: 200px)" srcset="' + imageUrl + '" type="image/webp">' +
        '<img src="' + imageUrl + '" alt="test">' +
        '</picture>';
  $( '#summernote' ).summernote( 'pasteHTML', HTMLstring );
}

2. Hooking in the function for uploads

function sendFile( imageUrl ) {
  ...
  $.ajax( {
    ...
    success: function( url ) {
      addImageToSummerNote( url );
    }
  } );
}

3. Overwriting insert image from link

$("#summernote").summernote({
  ...
  onImageLinkInsert: function (url) {
    addImageToSummerNote( url );
  },
  ...
});