CKEditor自定义图像浏览器

Question

我正在使用CKEditor,我已经成功实现了通常的自定义图像浏览器,它指向我的PHP脚本.但是,这会在一个丑陋的弹出窗口中打开.我想通过ajax将它打开到我页面上的某个div中,这样就可以滑出来并匹配我的cms的其余感觉.

我有两种方法可以做到这一点;

1)CKEditor的自定义插件按钮以某种方式打开我的对话框并以与弹出窗口相同的方式传回

2)通过其他方式打开我的对话框,然后将图像细节传递给CKEditor,方法是单击图像或者在编辑器中拖动它!

如果有人这样做,请告诉我.

Answer 1

关于当您将图像从任何浏览器窗口拖到编辑器时清理图像标记，以便您的 CMS 知道它是本地图像：

我已经实现了一个解决方案，它检查所有图像标签，如果它不是本地图像，它会通过 ajax 请求和 PHP 将图像复制到您的服务器，让我向您推荐此选项：

首先，您不应该立即发布编辑器中的内容，而是将其附加到不同的隐藏 div 中，以便您可以使用 javascript 对其进行分析，让我们为该 div 指定“descriptionDropPlace”的 id

然后，此代码将检查每个图像的 URL，如果它与您的本地域（此处为 mydomain）不匹配，它将发出 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;