jquery之CKEditor自定义图像浏览器

我正在使用 CKEditor，并且我已经成功实现了通常的自定义图像浏览器，该浏览器指向我的 php 脚本。然而，这会在一个丑陋的弹出窗口中打开。我想通过 ajax 将其打开到我页面上某处的 div 中，以便它滑出并与我的 cms 的其余感觉相匹配。

我发现有两种方法可以做到这一点；

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

2) 通过其他方式打开我的对话框，然后通过单击图像或将其拖动到编辑器中，将图像详细信息传递到 CKEditor!

如果有人这样做，请告诉我。

请您参考如下方法:

关于当您将图像从任何浏览器窗口拖到编辑器时清理图像标记，以便您的 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;