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

yeah, new CKFinder replacement w/o default browser is pain in the ass for developers
solution here seems to be ok:
viewtopic.php?f=11&t=15634
works for me

Wed, 09/09/2009 - 14:06

davidnorth

Joined: 03/09/2009

Posts: 4

Re: How to insert selected image in custom image browser

This page explains about configuring the image dialog, setting a custom browse/upload url etc:
http://docs.fckeditor.net/CKEditor_3.x/ ... ploader%29
but it doesn't explain how to integrate your custom browse image page!

peej, thanks for your suggestion but I'm sure there is some function in ckeditor that ckfinder uses to make the image selection when you double click, surely CKFinder doesnt' have to manually insert an image etc. - the workings of CKEditor's image dialog aren't CKFinder's concern, It'd be bad design for them to be coupled like that. CKFinder's source is obfuscated so I wasn't able to see what function it does call when you doubleclick, or at least I couldn't make much sense of it.

This must be a pretty easy question for one of the developers, please help!

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

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();

}

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

Dear raayana,

It seems your function setLink(url) may solve my current problem, http://cksource.com/forums/viewtopic.php?f=6&t=21048. As I did a test to link a Google logo via a remote file and it turns out the image in the preview dialog as shown below (it also shown correctly in <textarea>); so I guess if I make a right link to the local image file then I can get the right preview as well.

I have searched for many days and I guess your solution may rescue my problem, however I do not know how to code it correctly with CKEDITOR.replace() like below,

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

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...