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