CKEditor自定义图像浏览器

发布于 2024-10-21 08:28:52 字数 298 浏览 3 评论 0原文

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

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红焚 2024-10-28 08:28:52

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

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;

回复收藏 0 原文

~没有更多了~