Wysihtml5: Как загрузить вставленное изображение на сервер?

В настоящее время я использую текстовый редактор Wysihtml5 HTML. Это работает хорошо. Но теперь я хочу хранить вставленные изображения в корзине Amazon S3.

Когда кто-то вставляет изображение с URL-адреса, это изображение должно находиться на моем собственном сервере или в корзине.

В настоящее время редактор Wysihtml5 обычно содержит источники изображений. См. здесь: http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/

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

Когда я нажимаю вставить изображение

  1. Он должен хранить изображение на моем сервере
  2. Затем он должен заменить старый исходный URL-адрес изображения моим собственным URL-адресом сервера.

Как вызвать кнопку вставки изображения для загрузки изображения с запросом Ajax? Какими должны быть мои действия перед внедрением этой функции?


person hakiko    schedule 25.02.2017    source источник
comment
Я проверил это, но оно не работает должным образом. Вместо этого вы должны использовать это как: bootstrap- wysiwyg.github.io/bootstrap3-wysiwyg   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Я тебя не понимаю @UmairShahYousafzai? Что вы проверяли, что не работало должным образом?   -  person hakiko    schedule 26.02.2017
comment
Я проверял функцию вставки изображения, и она не очень хорошо работала... сначала она не могла добавлять изображения из ссылок https, а также из ссылок с дополнительными параметрами, а затем, когда я изменил ссылку на http вместо этого, так что только для как только он вставил изображение, а затем, когда я удалил изображение и попытался снова, он больше не добавлял вставку изображения ..! Может быть какая-то ошибка ... Как в описании было сказано, что он больше не поддерживается ..! :D   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Хорошо, спасибо за внимание. @UmairShahYousafzai, у вас есть идеи по моему вопросу?   -  person hakiko    schedule 26.02.2017
comment
Во-вторых, это всего лишь внешний редактор на основе JS. В нем нет функций загрузки... Вам нужно добавить эти функции при отправке через PHP или что-то еще..! Он только вставляет изображение с удаленным сервером src, не загружая их на сервер..!   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Да, я знаю это. Но как активировать кнопку «Вставить изображение» для начального шага загрузки? Как wysiwyg обрабатывает события?   -  person hakiko    schedule 26.02.2017
comment
Вы знаете, что можете сделать это через PHP, верно??? при отправке на данный момент, что я могу придумать, но может быть и другой способ ... например, редактор пишет в HTML-коде, чтобы вы могли получить URL-адреса атрибутов src изображений, а затем загрузить их на свой сервер, а затем заменить URL-адреса обратно на удаленные ссылки src ..! :D   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Для этого вы можете либо использовать PHP API как: simplehtmldom.sourceforge.net, либо написать свой собственный код для разбора html в PHP..!   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Но это дополнительный процесс для моего сервера. Нет ли какого-нибудь обработчика событий для wysiwyg?   -  person hakiko    schedule 26.02.2017
comment
Или вы можете сделать запрос ajax при вставке URL-адреса изображения, чтобы событие получило это, а затем отправило запрос на основе ajax в php-файл загрузки изображения со ссылкой в ​​качестве параметра, и изображение будет загружено, а затем в ответ вы получите свой сервер URL-адрес загруженного изображения на вашем сервере ..! И это в значительной степени об этом...! :П   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Если вы хотите, чтобы я мог попробовать это ..!   -  person Umair Shah Yousafzai    schedule 26.02.2017
comment
Пожалуйста. Я также знаю, что пытаюсь что-то об этом. Я добавлю сюда свой прогресс.   -  person hakiko    schedule 26.02.2017


Ответы (1)


Вот как именно вы можете это сделать:

Взгляните на ссылку:

Вставьте сценарий загрузки изображений на основе событий: http://huntedhunter.com/uploadimage/

Я только что написал это некоторое время назад ..!

Как это работает:

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

Вот код:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$( document ).ready(function() {
$('#insert').on('input', function(e) {
   var $val = $('#insert').val();
   $.ajax({
       url: 'upload.php',
       type: 'POST',
       data: { imageurl: $val} ,
       success: function (response) {
           $('#newimageurl').val(response);
           $('#showimage').attr('src', response);
       },
       error: function () {
           //your error code
       }
   }); 
});
});
</script>
<title></title>
</head>
<body>
<form class="form-horizontal" style="padding: 10%">
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Insert Image: </label>
        <div class="col-sm-10">
            <input class="form-control" id="insert" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image URL:</label>
        <div class="col-sm-10">
            <input class="form-control" id="newimageurl" placeholder="Enter ImageURL" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="ImageURL">Your New Image:</label>
        <div class="col-sm-10"><img id="showimage" src=""></div>
    </div>
</form>
</body>
</html>

PHP: (upload.php)

<?php
$image_name = basename($_POST["imageurl"]);
$ch = curl_init($_POST["imageurl"]);
$fp = fopen("tmp/$image_name", 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
$url = $_SERVER['REQUEST_URI']; //returns the current URL
$parts = explode('/', $url);
$dir = $_SERVER['SERVER_NAME'];

for ($i = 0; $i < count($parts) - 1; $i++)
    {
    $dir.= $parts[$i] . "/";
    }

echo "http://" . $dir . "tmp/" . $image_name;
?>
person Umair Shah Yousafzai    schedule 26.02.2017
comment
Это круто. Я могу сделать эту часть, но моя большая проблема заключается в том, как подключить это решение к wysihtml? :) А если пользователь удалит изображение из текстового редактора, что произойдет? - person hakiko; 26.02.2017
comment
Я просто нашел решение для моего вопроса :) - person hakiko; 26.02.2017
comment
И хотите ли вы также иметь возможность удалять изображение, когда пользователь удаляет изображение из текстового редактора? - person Umair Shah Yousafzai; 26.02.2017
comment
Это очень просто, теперь вам просто нужно указать идентификатор ввода редактора, и все готово..! - person Umair Shah Yousafzai; 26.02.2017
comment
Да, это будет большой проблемой, если на вашем сервере тысячи изображений и содержимого. В основном я хочу реализовать текстовый редактор, такой как Qora. - person hakiko; 26.02.2017
comment
Также вы можете подумать с помощью summernote.org редактора summernote. Редактор для меня не важен. Просто я хочу использовать загрузку URL-адреса изображения. И как я могу удалить изображения на моем сервере, когда пользователь удаляет их из текстового редактора? - person hakiko; 26.02.2017
comment
См. это: froala.com/wysiwyg-editor/docs/concepts/image /delete, но этот редактор слишком дорог для меня. Поэтому я пытаюсь найти альтернативу с открытым исходным кодом - person hakiko; 26.02.2017
comment
Да... вы можете удалять изображения, отслеживая изменения в DOM и когда элемент изображения удаляется из dom, поэтому вы получаете src этого элемента изображения, находите это изображение в папке и удаляете его, отправив запрос ajax на другой файл php ..! :D :P Но ты собираешься сделать это самостоятельно..Если только ты не ищешь платную поддержку..Так что тогда я смогу тебе помочь..! - person Umair Shah Yousafzai; 26.02.2017
comment
Это может помочь вам: событие, когда элемент удаляется из dom">stackoverflow.com/questions/2200494/ - person Umair Shah Yousafzai; 26.02.2017