CKSource

by **cokegen** » Thu Sep 10, 2009 7:25 am

Hi,

I want to implement an external upload method with CKeditor 3.0 and I configured the editor with this:

CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : '/browser/browse.php',
});

Now, in order to return to the "Image Properties" dialog once I finished with a string in the "URL" textbox to show the image preview I have been doing this :

function select_image(url) {
var o = opener.document.getElementById("88_textInput");
o.value = url;
self.close();
}

and the link in browse.php is:

<a href="javascript:select_image('/3.jpg');">Insert this image</a>

And the textbox gets the string I send it, but it doesn't display the image in the preview section, but if I type it manually it displays the image. Also, is there a way to refer to that textbox in a more generic way ? I'm asking this bc the box changes it's ID sometimes and I can't figure it out why or where.

CKfinder is not exactly what I need and the documentation on this is practically non-existent.

Maybe someone could provide more insight on this ?

Thanks

by **CrudeFaff** » Thu Sep 10, 2009 4:06 pm

I'd be very interested in how to get this to work. What does CKEditor expect back from the server when you upload a file?

by **CrudeFaff** » Thu Sep 10, 2009 5:26 pm

Just found this post which was very helpful:
viewtopic.php?f=6&t=15624

So it seems the code your back-end should serve up is something like:

Code: Select all: <script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(1, '<url of uploaded file>', '');</script>

Thanks to csosborn for working this out.

by **pserwylo** » Fri Sep 11, 2009 1:39 am

Yeah that's the one you want. Took me a while to find it too.
Just remember that the "1" is not always 1.
Instead, it is available as part of the query string in the url, called CKEditorFuncNum.

So, in our (PHP) usage, we do this:

Code: Select all: <script type="text/javascript"> var CKEditorFuncNum = <?php echo $_GET['CKEditorFuncNum'];?>; window.parent.CKEDITOR.tools.callFunction( CKEditorFuncNum, '<?php echo $url;?>', '<?php echo $error;?>' ); </script>

(For reference look at: /_source/plugins/filebrowser/plugin.js with the line: "editor._.filebrowserFn = CKEDITOR.tools.addFunction( setUrl, editor );")

Hope that helps.

by **cokegen** » Tue Oct 27, 2009 8:16 am

Thanks for your replies, it actually worked with some tweaking ...

window.parent.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, '/3.jpg', '' );

It goes back from the custom browser with the link and previews it just fine, so this (I think) is a complete working example:

editor.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>editor test</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/__ckeditor/ckeditor.js"></script>
</head>
<body>

<form method="post">
<p>
My Editor:<br />
<textarea name="editor1" id="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : '/browser/browse.php'
});
</script>
</p>
<p>
<input type="submit" />
</p>
</form>

</body>
</html>

browse.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browse test</title>

<script type="text/javascript">
function select_image() {
var CKEditorFuncNum = <?php echo $_GET['CKEditorFuncNum']; ?>;
window.parent.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, '/3.jpg', '' );
self.close();
}
</script>

</head>
<body>

<a href="javascript:select_image();">Insert this image</a>

</body>
</html>

by **psgg** » Tue Nov 17, 2009 5:01 pm

This post was most helpful. Thanks, everyone!

by **pogacsa** » Thu Nov 26, 2009 2:06 pm

is it working with IE as well?

by **Rich9** » Mon Jul 26, 2010 9:49 pm

This code didn't work at all:

function select_image() {
var CKEditorFuncNum = <?php echo $_GET['CKEditorFuncNum']; ?>;
window.parent.opener.CKEDITOR.tools.callFunction( CKEditorFuncNum, '/3.jpg', '' );
self.close();
}

All it did was close my browser window but nothing else - the URL and preview were not populated.

by **comp615** » Tue Jul 27, 2010 8:42 am

That's because your code isn't correct. See my other response to your double post.

CKSource

filebrowserBrowseUrl and external file browser/uploader

filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Re: filebrowserBrowseUrl and external file browser/uploader

Who is online