Summernote 0.8.12 Загрузка и удаление изображений - PullRequest
Новая
       46

Summernote 0.8.12 Загрузка и удаление изображений

0 голосов
/ 18 апреля 2020

Мне нужна твоя помощь. В версии Summernote 0.8.12 я не смог найти код для загрузки и удаления изображений. Вы можете помочь мне?

введите описание изображения здесь

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

@ bhttoan Я добавил предоставленный вами код удаления, но изображение все еще не удалено JS

$('#summernote').summernote({
callbacks: {
    onImageUpload: function(files) {
        for(let i=0; i < files.length; i++) {
            $.upload(files[i]);
        }
    }
},
height: 500,
});

$.upload = function (file) {
    let out = new FormData();
    out.append('file', file, file.name);

    $.ajax({
        method: 'POST',
        url: 'upload.php',
        contentType: false,
        cache: false,
        processData: false,
        data: out,
        success: function (img) {
            $('#summernote').summernote('insertImage', img);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.error(textStatus + " " + errorThrown);
        }
    });
};

ЗАГРУЗИТЬ. PHP

<?php if ($_FILES['file']['name']) {if (!$_FILES['file']['error']){
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = '..//uploads/cached/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo '..//uploads/cached/' . $filename;
}else{
echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
}
} ?>

РЕДАКТИРОВАТЬ

@ bhttoan Я добавил предоставленный вами код удаления, но изображение все еще не удалено

Код IMG

Удалить оповещение IMG

0 голосов
/ 19 апреля 2020

Для этого вам нужно использовать обратный вызов функции, которая будет обрабатывать вашу загрузку - в моем случае у меня есть летняя заметка (очень упрощенная для релевантности): 

    $('.editor').summernote({
        toolbar: [
            ['insert', ['link', 'picture']]
        ],
        callbacks: {
            onImageUpload: function(image) {
                uploadSNImage(image[0]);
            },
            onMediaDelete : function(target) {
                deleteSNImage(target[0].src);
            }
        }
    });

Обратный вызов говорит что при загрузке изображения оно вызывает функцию uploadSNImage.

Эта функция выглядит следующим образом: 

    function uploadSNImage(image, editor) {
        var data = new FormData();
        data.append("image", image);
        $.ajax({
            url: 'YOUR UPLOAD SCRIPT',
            cache: false,
            contentType: false,
            processData: false,
            data: data,
            type: "post",
            success: function(url) {
                var image = $('<img>').attr('src', url);
                editor.summernote("insertNode", image[0]);
            },
            error: function(data) {
            }
        });
    }

Вам потребуется изменить URL-адрес на URL-адрес вашего сервера, который будет принимать изображение и проверьте его, сохраните где-нибудь и так далее, но это физически позволит передать изображение этому сценарию.

Выходные данные этого сценария должны быть URL-адресом для файла, который вы загрузили, чтобы вы могли затем использовать его в успешной части функции.

Удаление работает аналогичным образом, за исключением того, что вы используете onMediaDelete в обратном вызове - снова это вызывает функцию с вызовом ajax скрипта для удаления изображения ( отредактировано, чтобы включить это выше).

Ваша функция удаления выглядит примерно так: 

function deleteSNImage(src) {
    $.ajax({
        data: {src : src},
        type: "POST",
        url: "YOUR DELETE SCRIPT", 
        cache: false,
        success: function(data) {
            alert(data);
        }
    });
}
...