The official documentation is less than clear - what's the correct way to integrate a custom file browser/uploader with CKEditor? (v3 - not FCKEditor)
+37
A:
Start by registering your custom browser/uploader when you instantiate CKEditor. You can designate different URLs for an image browser vs. a general file browser.
<script type="text/javascript">
CKEDITOR.replace('content', {
filebrowserBrowseUrl : '/browser/browse/type/all',
filebrowserUploadUrl : '/browser/upload/type/all',
filebrowserImageBrowseUrl : '/browser/browse/type/image',
filebrowserImageUploadUrl : '/browser/upload/type/image',
filebrowserWindowWidth : 800,
filebrowserWindowHeight : 500
});
</script>
Your custom code will receive a GET parameter, CKEditorFuncName. Save it - that's your callback function. Let's say you put it into $callback.
When someone selects a file, run this JavaScript to inform CKEditor which file was selected:
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
Where "url" is the URL of the file they picked. An optional third parameter can be text that you want displayed in a standard alert dialog, such as "illegal file" or something. Set url to an empty string if the third parameter is an error message.
CKEditor's "upload" tab will submit a file in the field "upload" - in PHP, that goes to $_FILES['upload']. What CKEditor wants your server to output is a complete JavaScript block:
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>';
echo $output;
Again, you need to give it that callback parameter, the URL of the file, and optionally a message. If the message is an empty string, nothing will display; if the message is an error, then url should be an empty string.
The official CKEditor documentation is incomplete on all this, but if you follow the above it'll work like a champ.
Don Jones
2009-09-30 15:00:43
I can't believe the developer documentation for this process is so sparse. Thanks for filling in the details.
codefoo
2009-10-08 01:36:33
That was great info! Waay better than the official documentation.
Jon Romero
2009-11-19 14:23:40
thanks! the ckeditor documentation needs this..
Bala Clark
2010-01-05 11:53:28
Help... I've follwed the instructions below, the the Server is outputting a JavaScript block exactly as above... Problem is that CKEDITOR isn't doing anything with it, the text is simply showing up in the UPLOAD tab, and not switching tabs and taking the URL...Is there a config, or plugin for the callback which I need to make sure is enabled?Thanks!!!
AnApprentice
2010-01-22 06:21:26
Thanks for the great info! Didn't work for me with CKEditorFuncName, but it did with CKEditorFuncNum!
wheelie
2010-02-19 15:39:17
Thanks a lot! But it's CKEditorFunNum, not Name =P
emzero
2010-02-23 18:37:57
@emzero, I think it probably was CKEditorFuncName, maybe the more CKEditor uses CKEditorFuncNum now. Anyway the answer is spot on!
Rosdi
2010-08-19 07:35:25
This seems overly complicated. Have you tried the simple config option I outlined below?
ScottE
2010-09-05 12:12:41
+2
A:
Thanks for the info, Don. I have been trying to do this as well.
A resource that others might fine helpful:
If the developer's guide was (a) finished and (b) comprehensive, it'd be more helpful!
Don Jones
2009-10-07 17:22:27
A:
There's a good article posted just a few days ago on zerokspot on this topic. The article is Custom filebrowser callbacks in CKEditor 3.0. The most relevant section is quoted below.
So all you have to do from the file browser when you have a file selected is to call this code with the right callback number (normally 1) and the URL of the selected file:
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);
For the quick-uploader the process is quite similar. At first I thought that the editor might be listening for a 200 HTTP return code and perhaps look into some header field or something like that to determine the location of the uploaded file, but then - through some Firebug monitoring - I noticed that all that happens after an upload is the following code:
<script type="text/javascript"> window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum, url, errorMessage); </script>If the upload failed, set the errorMessage to some non-zero-length string and empty the url, and vice versa on success.
Something like this could perhaps be a little bit better documented :-)
clops
2009-10-09 22:30:11
you could have given the url -> http://zerokspot.com/weblog/2009/09/09/custom-filebrowser-callbacks-ckeditor/
Jon Romero
2009-11-19 14:20:46
As much as I appreciate that you found my blog, clops, you could have at least linked back to it or just linked to it at all, instead of copy/pasting my blog post.
Horst Gutmann
2009-12-19 14:22:27
Bill the Lizard
2009-12-19 14:37:13
A:
in what file do we update the instance code? also, where do we update the code in the file? This seems to never have been explained on any of the doc pages.
ie. CKEDITOR.replace(’instancename’, {…
Ben
2009-12-05 19:30:03
I'd suggest visiting http://sourceforge.net/projects/cahoots. This is open source; you can download the source code and see the file browser integration for yourself.
Don Jones
2009-12-17 23:42:04
+3
A:
Hi,
I spent a while trying to figure this one out and here is what I did. I've broken it down very simply as that is what I needed.
'directly below your ckeditor text area enter the upload file like this >>>>
<form action="welcomeeditupload.asp" method="post" name="deletechecked">
<div align="center"><br />
<br />
<label></label>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><%=(rslegschedule.Fields.Item("welcomevar").Value)%></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
filebrowserUploadUrl : 'updateimagedone.asp'
});
//]]>
</script>
<br />
<br />
<br />
<input type="submit" value="Update">
</div>
</form>
'and then add your upload file, here is mine which is written in ASP. If you're using PHP, etc. simply replace the ASP with your upload script but make sure the page outputs the same thing.
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% if Request("CKEditorFuncNum")=1 then
Set Upload = Server.CreateObject("Persits.Upload")
Upload.OverwriteFiles = False
Upload.SetMaxSize 5000000, True
Upload.CodePage = 65001
On Error Resume Next
Upload.Save "d:\hosting\belaullach\senate\legislation"
Dim picture
For Each File in Upload.Files
Ext = UCase(Right(File.Path, 3))
If Ext <> "JPG" Then
If Ext <> "BMP" Then
Response.Write "File " & File.Path & " is not a .jpg or .bmp file." & "<BR>"
Response.write "You can only upload .jpg or .bmp files." & "<BR>" & "<BR>"
End if
Else
File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName)
f1=File.fileName
End If
Next
End if
fnm="/senate/legislation/"&f1 imgop = "window.parent.CKEDITOR.tools.callFunction('1','"&fnm&"');;" 'imgop="callFunction('1','"&fnm&"',"");" Response.write imgop
%>
elliott benzle
2009-12-25 04:56:05
+3
A:
I have posted one small tutorial about integrating the FileBrowser available in old FCKEditor into CKEditor.
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
It contains step by step instructions for doing so and its pretty simple. I hope anybody in search of this will find this tutorial helpful.
Penuel
2010-03-05 04:54:13
+1
A:
This is the approach I've used. It's quite straightforward, and works just fine.
In the CK editor root directory there is a file named config.js
I added this (you don't need the querystring stuff, this is just for our file manager). I also included some skinning and changing of the default buttons shown:
CKEDITOR.editorConfig = function(config) {
config.skin = 'v2';
config.startupFocus = false;
config.filebrowserBrowseUrl = '/admin/content/filemanager.aspx?path=Userfiles/File&editor=FCK';
config.filebrowserImageBrowseUrl = '/admin/content/filemanager.aspx?type=Image&path=Userfiles/Image&editor=FCK';
config.toolbar_Full =
[
['Source', '-', 'Preview', '-'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'], //, 'Scayt'
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
'/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'],
'/',
['Styles', 'Format', 'Templates'],
['Maximize', 'ShowBlocks']
];
};
Then, our file manager calls this:
opener.SetUrl('somefilename');
ScottE
2010-05-27 20:14:35