CODEWITHSUNDEEP
jqueryimagecontent-management-systemckeditormodal-dialog
DrKHunter
DrKHunter

Reputation: 424

CKEditor custom image browser

I'm using CKEditor and I've successfully implemented the usual custom image browser which points to my php script. However, this opens in an ugly pop-up window. I would like to open it via ajax into a div somewhere on my page so it slides out and matches the rest feel of my cms.

I'm seeing two ways to do this;

1) A custom plugin button for CKEditor that somehow opens my dialog box and passes back in the same ways as the pop-up does

2) Open my dialog through other means and then pass image details to CKEditor, either by clicking on an image or perhaps dragging it in the editor!

If anyone has done this please let me know.

Upvotes: 5

Views: 1760

Answers (1)

Uriel Robles
Uriel Robles

Reputation: 61

About sanitizing the image tag when you drag an image from any browser window to the editor so your CMS knows it's a local image:

I've implemented a solution which checks for all the image tags, and if it is not a local image, it copies the image to your server via an ajax request and PHP, let me recommend this option to you:

First, you should not post the content from the editor right away, but append it to a different hidden div so you can analyze it with javascript, let's give this div the id of "descriptionDropPlace"

Then, this code will check the URL of each image, and if it doesn't match your local domain (mydomain here), it will make an ajax request:

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;
            });
        }
});

So phpGetImage.php looks like this (there's some code to detect if there are GET variables and to rid oruselves of them, and to detect if there are two images of the same name but with a different directory, and save them with the name of the whole character escaped URL they are located in):

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

Upvotes: 1

Related Questions