如何在summernote中用pitcure标签替换img标签?

Question

我正在尝试用编辑器中的图片标签替换img标签。

编辑器添加url，如:<img src="http://localhost/news/uploads/large/6dBUlfZZBW.webp">，上传成功时使用以下代码:

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

我想把它改成像这样的图片标签:

<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> 

注意:所有的图像都有相同的名称，但不同的文件夹，我使用的是v8.20，这里是缩小版，如果有人想看看:

下面是完整的设置演示

Answer 1

您可以直接从字符串创建图片标签，这显然是不安全的。

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>`)

就像插入图片一样插入

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

将它们分成组件会更安全。

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])

现在您可以遍历ajax响应并动态地创建和添加新的图片源。

Answer 2

这是一个三部分的问题，

首先是找到一种方法来插入自定义标记的东西，然后更新图像来上传功能，最后从链接功能更新图像。

下面是一个工作演示，https://codepen.io/shramee/pen/jOZVbxV?editors=0010

的解决方案

1。插入标记

的函数

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。为uploads挂接函数

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

3。覆盖从链接

插入图像

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