Добавьте гиперссылку и класс к каждому изображению в строке - PullRequest
Новая
       17

Добавьте гиперссылку и класс к каждому изображению в строке

0 голосов
/ 11 февраля 2020

Я использую Summernote для публикации блогов, но использую фрагмент кода для загрузки изображений непосредственно на сервер, а не внутри самого текста, код выглядит следующим образом: 

<script>$(document).ready(function() {
$("#summernote").summernote({
         callbacks: {
        onImageUpload : function(files, editor, welEditable) {

             for(var i = files.length - 1; i >= 0; i--) {
                     sendFile(files[i], this);
            }
        }
    }
    });
});
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
    data: form_data,
    type: "POST",
    url: 'editor-upload.php',
    cache: false,
    contentType: false,
    processData: false,
    success: function(url) {
        $(el).summernote('editor.insertImage', url);
    }
});
}
</script>

<?php
if(empty($_FILES['file']))
{
    exit();
}
$errorImgFile = "./img/img_upload_error.jpg";
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)) . '.' . end($temp);
$destinationFilePath = './img-uploads/'.$newfilename ;
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
    echo $errorImgFile;
}
else{
    echo $destinationFilePath;
}

?>

Я пытаюсь теперь включить лайтбокс во встроенные изображения, но не можете найти способ индивидуально изменить теги img для этого? Например, 

$string = '<img src="firstimg.jpg"> a little bit of text <img src="secondimg.jpg">';

Мне нужно преобразовать его во что-то похожее на 

<a class="example-image-link" href="firstimg.jpg" data-lightbox="example-set"><img class="example-image" src="firstimg.jpg"></a> a little bit of text <a class="example-image-link" href="secondimg.jpg" data-lightbox="example-set"><img class="example-image" src="secondimg.jpg"></a>

Я искал вокруг, но не нашел ничего, чтобы помочь с этим? Любая помощь будет оценена!

1 Ответ

1 голос
/ 16 февраля 2020 

let $string = `<img src="firstimg.jpg"> a little bit of text <img src="secondimg.jpg" >`
let parser = new DOMParser()
let _document = parser.parseFromString($string, "text/html")
let ele = _document.getElementsByTagName("IMG")
for(let i = 0; i < ele.length; i++) {
let wrapper = _document.createElement('a'); 
wrapper.classList = ["example-image-link"]
wrapper.href = ele[i].src
wrapper.setAttribute('data-lightbox', 'Hello World!');
let myImg =  ele[i]
wrapper.appendChild(myImg.cloneNode(true)); 
myImg.parentNode.replaceChild(wrapper, myImg);
}

let newStr = `${_document.getElementsByTagName("BODY")[0].innerHTML}`
console.log(newStr)

Вы можете попробовать с вышеуказанным логи c

...