The forum operates in read-only mode. Please head to StackOverflow for support.

Thu, 09/03/2009 - 16:33

davidnorth

Joined: 03/09/2009

Posts: 4

How to insert selected image in custom image browser

In FCKEditor I had a custom image browser in a popup opened by the 'browser server' button.
When an image is selected this just called the following simple javascript:

window.top.opener.SetUrl( encodeURI( image.src ).replace( '#', '%23' ), null, null, image.alt ) ;

This would insert the selected image into the image dialog preview.

After upgrading to CKEditor, my image browser opens up fine still but SetUrl won't work, the function is undefined on window.top.opener. Although the documentation tells you how to specify your own image browser URL, I can't find a mention of how to actually handle image selection.

Thanks

Sat, 09/05/2009 - 07:24

peej

Joined: 05/09/2009

Posts: 6

Re: How to insert selected image in custom image browser

I'm having the same issue. I've been looking at it all night and haven't solved it, but I did find a temporary work around that makes it usable. Here's a SelectFile function that works for me. Notice the funky names for the input boxes, 88_textInput. This is where the URL to the image goes.

function SelectFile( fileUrl )
{
window.opener.document.getElementById("88_textInput").value = fileUrl;
//window.opener.document.getElementById("ImagePreviewBox").innerHTML="<img src='" + fileUrl + "' id='PreviewImage' />" + window.opener.document.getElementById("ImagePreviewBox").innerHTML;
window.close();
}

This works, partially. I noticed that when adding the image this way, the preview box didn't get the image inserted correctly, so I added the commented line, but then I found that there are two images in the preview pane if you click ok, then right click and edit the image properties.

In the older 2.6 code, there was a file called fckeditor\editor\dialog\fck_image\fck_image.js that included the SetUrl() function, so I tried copying that into the opening window, but it didn't work because the input boxes are all named differently now.

I have a lot of reading to do to learn more about the architecture so that I'll /really/ know why it broke. Anyway, hope this helps.

Sun, 09/06/2009 - 02:16

dmitryx

Joined: 31/08/2009

Posts: 17

Re: How to insert selected image in custom image browser

viewtopic.php?f=11&t=15634

Wed, 09/09/2009 - 14:06

davidnorth

Joined: 03/09/2009

Posts: 4

Re: How to insert selected image in custom image browser

http://docs.fckeditor.net/CKEditor_3.x/ ... ploader%29

Wed, 09/09/2009 - 14:16

davidnorth

Joined: 03/09/2009

Posts: 4

Re: How to insert selected image in custom image browser

peej wrote:I'm having the same issue. I've been looking at it all night and haven't solved it, but I did find a temporary work around that makes it usable. Here's a SelectFile function that works for me. Notice the funky names for the input boxes, 88_textInput. This is where the URL to the image goes.
function SelectFile( fileUrl )
{
window.opener.document.getElementById("88_textInput").value = fileUrl;
//window.opener.document.getElementById("ImagePreviewBox").innerHTML="<img src='" + fileUrl + "' id='PreviewImage' />" + window.opener.document.getElementById("ImagePreviewBox").innerHTML;
window.close();
}
This works, partially. I noticed that when adding the image this way, the preview box didn't get the image inserted correctly, so I added the commented line, but then I found that there are two images in the preview pane if you click ok, then right click and edit the image properties.

In the older 2.6 code, there was a file called fckeditor\editor\dialog\fck_image\fck_image.js that included the SetUrl() function, so I tried copying that into the opening window, but it didn't work because the input boxes are all named differently now.

I have a lot of reading to do to learn more about the architecture so that I'll /really/ know why it broke. Anyway, hope this helps.

Setting the src on 'previewImage' instead of inserting a new image tag will solve the problem of multiple images when you add another to the wysiwyg:
This worked for me.

window.opener.document.getElementById("previewImage").src = encodeURI( image.src );

My text input had a different id to yours, "41_textInput", not sure where that's coming from. I'm not too happy having that id hard coded into the script for my image browser.

Thu, 09/10/2009 - 02:37

peej

Joined: 05/09/2009

Posts: 6

Re: How to insert selected image in custom image browser

Thanks for the idea about the .src. The elements in the dialog are created dynamically and are supposed to be referenced using some built in function. I noticed when I removed some of the plugins (save, print), then my 88_textInput changed to 86_textInput. I can't seem to find the method that allows me to get a reference to that element by name.

window.opener.document.getElementById('txtUrl') doesn't work. I've tried CKEDITOR.dialog.getCurrent(), but that doesn't work. I'm still looking. Any ideas?

Thu, 09/10/2009 - 09:41

pochuang

Joined: 09/09/2009

Posts: 2

Re: How to insert selected image in custom image browser

This helps me a lot. Thanks. But I am curious that where do you get the id 'previewImage'

Fri, 09/11/2009 - 11:50

raayana

Joined: 11/09/2009

Posts: 1

Re: How to insert selected image in custom image browser

function setLink(url) {

window.opener.CKEDITOR.tools.callFunction(1, url);
window.close();

}

Mon, 09/14/2009 - 16:44

davidnorth

Joined: 03/09/2009

Posts: 4

Re: How to insert selected image in custom image browser

raayana wrote:I use a custom image browser and it took me some time to find out how the communication between the browser and the image dialog of CKE works. After an image is selected in the custom file browser the URL of the image should be inserted into the URL field of the image dialog (so you geht the preview automatically!).

This is how I did it, I added the following javascript code to the custom file browser as a function to return image URL to dialog:
function setLink(url) {

window.opener.CKEDITOR.tools.callFunction(1, url);
window.close();

}
Hope this helps!

Thank you so much, this works perfectly.

Tue, 09/15/2009 - 23:01

#10

peej

Joined: 05/09/2009

Posts: 6

Re: How to insert selected image in custom image browser

Yes, that worked for me too, thank you so much!

But wow, that is not intuitive at all. This should be documented somewhere. Is there a way to get a list of functions available to call? We'll have to look at the source I suppose to see the function definitions. I just saw this post and implemented it and it works like dream.

Thanks again!

Wed, 11/04/2009 - 19:22

#11

keevitaja

Joined: 02/11/2009

Posts: 2

Re: How to insert selected image in custom image browser

anyone knows how to handle custom image url? end result should be similar to:

<a href="image.jpg"><img src="thumb.jpg"></a>

the image browser knows both addresses! can i do it somehow?

Thu, 11/05/2009 - 19:23

#12

kaffesump

Joined: 02/11/2009

Posts: 8

Re: How to insert selected image in custom image browser

As a comment on the image-thing (I've been digging deep on that myself). I don't think there's a way to get the elements with using IDs and stuff and know for sure that you are getting the right element. You should use the CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] ); function, explained in the documentation that somebody linked to in this thread earlier.

Note that the funcNum parameter should not be static, this number should be sent to the image-browser in the first step (see the manual on how to generate the proper number) and then returned to the function.

Tue, 05/18/2010 - 23:03

#13

drooh

Joined: 03/03/2010

Posts: 8

Re: How to insert selected image in custom image browser

It seems for me that with firefox I have to put 2 instead of 1
window.opener.CKEDITOR.tools.callFunction(2, url);

IE8 and Chrome seem to work with 1
window.opener.CKEDITOR.tools.callFunction(1, url);

Any ideas? I've spent the last several hours trying to de-bug this...

Sun, 12/19/2010 - 10:16

#14

eko4v

Joined: 30/11/2010

Posts: 4

Re: How to insert selected image in custom image browser

function setLink(url)http://cksource.com/forums/viewtopic.php?f=6&t=21048

      CKEDITOR.replace('message', {
//         filebrowserBrowseUrl:       'ckfinder/ckfinder.html', // how to put your function or the link of it here??
//         ... ,
         toolbar: [ ... ],
         resize_enabled: false});

Remark:

Attachments:

Attachment	Size
ref.jpg	34.89 KB

Thu, 04/04/2013 - 10:03

(Reply to #14) #15

mgm

Joined: 03/04/2013

Posts: 3

Re: How to insert selected image in custom image browser

Hi,

This works for me ;

BrowseImage.cshtml;

            $(function () {
                $('a').click(function () {
                    window.opener.CkEditorURLTransfer($(this).attr('href'));
                    //window.opener.CKEDITOR.tools.callFunction('CkEditorURLTransfer("' + $(this).attr('href') + '")');
                    window.close();
                });
            });

});
</script>

Index.cshtml;

        function CkEditorURLTransfer(url) {
          // window.opener.CKEDITOR.tools.callFunction(1, url);
            // window.close();
            window.parent.CKEDITOR.tools.callFunction(1, url, '');
            $('#cke_111_textInput').val(url);

}

Fri, 03/14/2014 - 10:23

#16

barisim.net

Joined: 14/03/2014

Posts: 1

URL identify access..

Hi, ckeditor the users

current page:

function BrowseServerUrlAdd(url){
$("label:contains('URL')").next().find("input[class='cke_dialog_ui_input_text']").val(url);
}

window.open (file finder):

function NewWindowClose(url) //posted url
{
if(url.length > 5) { //url check control (optional)
window.opener.UrlEkle(url); //current page - function
window.close();
}
}

Good work...