CKEditor - браузер пользовательских изображений - PullRequest
Новая
       9

CKEditor - браузер пользовательских изображений

5 голосов
/ 10 марта 2011

Я использую CKEditor и успешно реализовал обычный пользовательский браузер изображений, который указывает на мой php-скрипт.Однако, это открывается в уродливом всплывающем окне.Я хотел бы открыть его через ajax в div где-то на моей странице, чтобы он выдвигался и соответствовал остальному ощущению моей cms.

Я вижу два способа сделать это;

1) Пользовательская кнопка плагина для CKEditor, которая каким-то образом открывает мое диалоговое окно и возвращается обратно так же, как это делает всплывающее окно

2) Открывает мой диалог другими способами и затем передает детали изображения в CKEditor, либонажав на изображение или, возможно, перетащив его в редактор!

Если кто-то сделал это, пожалуйста, дайте мне знать.

1 Ответ

1 голос
/ 09 января 2014

Об очистке тега изображения при перетаскивании изображения из любого окна браузера в редактор, чтобы ваша CMS знала, что это локальное изображение:

Я реализовал решение, которое проверяет все теги изображений, и, если оно не является локальным изображением, оно копирует изображение на ваш сервер с помощью ajax-запроса и PHP, позвольте мне порекомендовать вам этот вариант:

Во-первых, вы не должны сразу публиковать контент из редактора, а добавлять его в другой скрытый div, чтобы вы могли проанализировать его с помощью javascript, давайте присвоим этому div идентификатор "descriptionDropPlace"

Затем этот код проверит URL каждого изображения, и если он не соответствует вашему локальному домену (здесь мой домен), он выполнит запрос ajax: 

var images = $('descriptionDropPlaceimg');
$("descriptionDropPlace img").each(function(index){
    var ajaxDone = false;
    var src = $(this).attr("src");

        var domain = src.match(/^http:\/\/[^/]+/)[0];
        if(!domain.match("mydomain")){
            $.post('http://'+window.location.hostname+'/phpGetImage.php', { url: src }).done(function(result){
                $(images[index]).attr('src', result);
                var ajaxDone = true;
            });
        }
});

Таким образом, phpGetImage.php выглядит следующим образом (есть некоторый код, чтобы определить наличие переменных GET и избавиться от них, а также определить наличие двух изображений с одинаковым именем, но с другим каталогом, и сохранить их с помощью имя целого экранированного символа URL, в котором они находятся): 

    $url = $_POST["url"];
    $headers = get_headers($url, 1);
    if(!empty($headers['Location'])){
      $url = $headers['Location'];
    }
    $url = explode("?", $url);
    $url = $url[0];
    $replace = array("/", ".");
    $image = str_replace("http:--", "",str_replace($replace, "-", $url));
    $path = './uploads/yourImageDirectory/'.$image;

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $data = curl_exec($ch);
    curl_close($ch);
    file_put_contents($path, $data);

    echo base_url().'uploads/yourImageDirectory/'.$image;
...