How can you integrate a custom file browser uploader with CKEditor

Question

The official documentation is less than clear - what s the correct way to integrate a custom file browser uploader with CKEditor   v3 - not FCKEditor

User · Answer

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 = "<html><body><script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction('1','"&fnm&"');</script></body></html>;"
    'imgop="callFunction('1','"&fnm&"',"");"
    Response.write imgop
%>

User · Answer

I just went through the learning process myself   I figured it out  but I agree the documentation is written in a way that was sorta intimidating to me   The big  aha  moment for me was understanding that for browsing  all CKeditor does is open a new window and provide a few parameters in the url   It allows you to add additional parameters but be advised you will need to use encodeURIComponent   on your values   I call the browser and the uploader with  CKEDITOR replace   body             filebrowserBrowseUrl   browse php type Images amp dir               encodeURIComponent  content images          filebrowserUploadUrl   upload php type Files amp dir               encodeURIComponent  content images         For the browser  in the open window  browse php  you use php  amp  js to supply a list of choices and then upon your supplied onclick handler  you call a CKeditor function with two arguments  the url path to the selected image and CKEditorFuncNum supplied by CKeditor in the url   function myOnclickHandler                   window opener CKEDITOR tools callFunction  lt  php echo   GET  CKEditorFuncNum      gt   pathToImage         window close               Simarly  the uploader simply calls the url you supply  e g   upload php  and again supplies   GET  CKEditorFuncNum     The target is  an iframe so  after you save the file from   FILES you pass your feedback to CKeditor as thus    funcNum     GET  CKEditorFuncNum      exit   lt script gt window parent CKEDITOR tools callFunction  funcNum    filePath     errorMessage    lt  script gt         Below is a simple to understand custom browser script  While it does not allow users to navigate around in the server  it does allow you to indicate which directory to pull image files from when calling the browser   It s all rather basic coding so it should work in all relatively modern browsers       CKeditor merely opens a new window with the url provided                   in CKeditor   use encodeURIComponent     to add dir param to the filebrowserBrowseUrl property      Replace content images with directory where your images are housed                       CKEDITOR replace   editor1                   filebrowserBrowseUrl     browse php   type Images amp dir     encodeURIComponent  content images                  filebrowserUploadUrl   upload php type Files amp dir     encodeURIComponent  content images                                       complete code below  for browse php   lt  php   header  Content-Type  text html  charset utf-8 n      header  Cache-Control  no-cache  must-revalidate n      header  Expires  Sat  26 Jul 1997 05 00 00 GMT          e-z params    dim   150             image displays proportionally within this square dimension         cols   4              thumbnails per row     thumIndicator     th      e g    image123 th jpg   - gt  if not using thumbNails then use empty string        gt     lt  DOCTYPE html gt     lt html gt     lt head gt         lt title gt browse file lt  title gt         lt meta charset  utf-8  gt          lt style gt            html            body  padding 0  margin 0  background black              table  width 100   border-spacing 15px              td  text-align center  padding 5px  background  181818              img  border 5px solid  303030  padding 0  verticle-align  middle             img hover   border-color blue  cursor pointer           lt  style gt      lt  head gt       lt body gt      lt table gt      lt  php     dir     GET  dir          dir   rtrim  dir           the script will add the ending slash when appropriate     files   scandir  dir       images   array       foreach  files as  file            filter for thumbNail image files  use an empty string for  thumIndicator if not using thumbnails       if   preg match       thumIndicator      jpg jpeg png gif   i    file              continue          thumbSrc    dir          file         fileBaseName   str replace   th        file           image info   getimagesize  thumbSrc           w    image info 0           h    image info 1         if    w  gt    h               a is the longer side and  b is the shorter side          a     w             b     h          else              a     h             b     w                     pct    b    a         the shorter sides relationship to the longer side      if   a  gt   dim               a    dim          limit the longer side to the dimension specified       b    int   a    pct       calculate the shorter side       width        w  gt    h    a    b         height       w  gt    h    b    a            produce an image tag      str   sprintf   lt img src   s  width   d  height   d  title   s  alt    gt                thumbSrc             width             height             fileBaseName                    save image tags in an array      images     str replace              str      an unescaped apostrophe would break js        numRows   floor  count  images     cols          if there are any images left over then add another row if  count  images     cols    0          numRows           produce the correct number of table rows with empty cells for  i 0   i lt  numRows   i           echo   t lt tr gt     implode     array fill 0   cols    lt td gt  lt  td gt         lt  tr gt  n n        gt     lt  table gt       lt script gt        make a js array from the php array images        lt  php     foreach   images as  v        echo sprintf   t  s   n    v        gt       tbl   document getElementsByTagName  table   0      td   tbl getElementsByTagName  td          fill the empty table cells with data for var i 0  i  lt  images length  i          td i  innerHTML   images i          event handler to place clicked image into CKeditor tbl onclick           function e               var tgt   e target    event srcElement                url             if  tgt nodeName     IMG                  return             url     lt  php echo  dir   gt           tgt title             this onclick   null             window opener CKEDITOR tools callFunction  lt  php echo   GET  CKEditorFuncNum      gt   url              window close               lt  script gt     lt  body gt     lt  html gt

User · Answer

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 amp editor FCK       config filebrowserImageBrowseUrl     admin content filemanager aspx type Image amp path Userfiles Image amp 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

User · Answer

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    lt script type  text javascript  gt  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      lt  script gt    Your custom code will receive a GET parameter called CKEditorFuncNum  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  lt  php echo  callback    gt  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     lt html gt  lt body gt  lt script type  text javascript  gt window parent CKEDITOR tools callFunction    callback        url        msg      lt  script gt  lt  body gt  lt  html gt    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

User · Answer

An article at zerokspot entitled Custom filebrowser callbacks in CKEditor 3 0 handles this   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        lt script type  text javascript  gt    window parent CKEDITOR tools callFunction CKEditorFuncNum url  errorMessage      lt  script gt       If the upload failed  set the   errorMessage to some non-zero-length   string and empty the url  and vice   versa on success

User · Answer

For people wondering about a Servlet JSP implementation here s how you go about doing it    I will be explaining uploadimage below also    1  First make sure you have added the filebrowser and uploadimage variable to your     config js file  Make you also have the uploadimage and filebrowser folder inside the plugins folder too   2  This part is where it tripped me up   The Ckeditor website documentation says you need to use these two methods   function getUrlParam  paramName         var reParam   new RegExp          amp    amp      paramName         amp        i         var match   window location search match  reParam        return   match  amp  amp  match length  gt  1     match 1    null    function returnFileUrl         var funcNum   getUrlParam   CKEditorFuncNum         var fileUrl    https   patiliyo com wp-content uploads 2017 07 ruyada-kedi-gormek jpg       window opener CKEDITOR tools callFunction  funcNum  fileUrl        window close           What they don t mention is that these methods have to be on a   different page and not the page where you are clicking the browse server button from    So if you have ckeditor initialized in page editor jsp then you need to create a file browser  with basic html css javascript  in page filebrowser jsp    editor jsp  all you need is this in your script tag  This page will open filebrowser jsp in a mini window when you click on the browse server button    CKEDITOR replace   editor         filebrowserBrowseUrl      filebrowser jsp     jsp page with jquery to call servlet and get image files to view     filebrowserUploadUrl      UploadImage     servlet        filebrowser jsp  is the custom file browser you built which will contain the methods mentioned above    lt head gt   lt script src        ckeditor ckeditor js  gt  lt  script gt   lt  head gt   lt body gt   lt script gt    function getUrlParam  paramName         var reParam   new RegExp          amp    amp      paramName         amp        i         var match   window location search match  reParam        return   match  amp  amp  match length  gt  1     match 1    null     function returnFileUrl         var funcNum   getUrlParam   CKEditorFuncNum     var fileUrl    https   patiliyo com wp-content uploads 2017 07 ruyada-kedi-gormek jpg       window opener CKEDITOR tools callFunction  funcNum  fileUrl        window close          when this window opens it will load all the images which you send from the FileBrowser Servlet   getImages    function getImages          get     FileBrowser   function responseJson                  do something with responseJson  like create  lt img gt  tags and update the src attributes                   you call this function and pass  fileUrl  when user clicks on an image that you loaded into this window from a servlet returnFileUrl     lt  script gt   lt  body gt    3  The FileBrowser Servlet  protected void doGet HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException       Images i   new Images        List lt ImageObject gt  images   i getImages      get images from your database or some cloud service or whatever  easier if they are in a url ready format      String json   new Gson   toJson images       response setContentType  application json        response setCharacterEncoding  UTF-8        response getWriter   write json       4  UploadImage Servlet  Go back to your config js file for ckeditor and add the following line     https   docs ckeditor com ckeditor4 latest guide dev file upload html config uploadUrl     UploadImage     Then you can drag and drop files also      protected void doPost HttpServletRequest request  HttpServletResponse response  throws ServletException  IOException                     Images i   new Images          do whatever you usually do to upload your image to your server  in my case i uploaded to google cloud storage and saved the url in a database         Now this part is important  You need to return the response in json format  And it has to look like this           https   docs ckeditor com ckeditor4 latest guide dev file upload html         response must be in this format                         uploaded   1               fileName    example png                url    https   www cats com example png                                 String image    https   www cats com example png                           ImageObject objResponse   i getCkEditorObjectResponse image                           String json   new Gson   toJson objResponse                           response setContentType  application json                            response setCharacterEncoding  UTF-8                            response getWriter   write json                                             And that s all folks  Hope it helps someone

User · Answer

Start by registering your custom browser uploader when you instantiate CKEditor     lt script type  text javascript  gt  CKEDITOR replace  content         filebrowserUploadUrl   Upload File Url    http   localhost phpwork test ckFileUpload php     filebrowserWindowWidth    800      filebrowserWindowHeight   500      lt  script gt    Code for upload file ckFileUpload php   amp  put the upload file on root dir of your project      HERE SET THE PATH TO THE FOLDERS FOR IMAGES AND AUDIO ON YOUR SERVER  RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER    upload dir   array    img   gt    phpwork test uploads editor-images      audio   gt    phpwork ezcore v1 uploads editor-images          HERE PERMISSIONS FOR IMAGE  imgset   array    maxsize    gt  2000         maximum file size  in KiloBytes  2 MB    maxwidth    gt  900         maximum allowed width  in pixels   maxheight    gt  800        maximum allowed height  in pixels   minwidth    gt  10          minimum allowed width  in pixels   minheight    gt  10         minimum allowed height  in pixels   type    gt  array  bmp    gif    jpg    jpeg    png        allowed extensions        HERE PERMISSIONS FOR AUDIO  audioset   array    maxsize    gt  20000        maximum file size  in KiloBytes  20 MB    type    gt  array  mp3    ogg    wav        allowed extensions        If 1 and filename exists  RENAME file  adding   NR  to the end of filename  name 1 ext  name 2 ext         If 0  will OVERWRITE the existing file define  RENAME F   1     re       if isset   FILES  upload     amp  amp  strlen   FILES  upload    name     gt 1      define  F NAME   preg replace            i       basename   FILES  upload    name          get filename without extension       get protocol and host name to send the absolute image path to CKEditor    protocol    empty   SERVER  HTTPS       https        http         site    protocol    SERVER  SERVER NAME            sepext   explode      strtolower   FILES  upload    name         type   end  sepext         gets extension    upload dir   in array  type   imgset  type       upload dir  img      upload dir  audio       upload dir   trim  upload dir                  checkings for image or audio   if in array  type   imgset  type          list  width   height    getimagesize   FILES  upload    tmp name         image width and height     if isset  width   amp  amp  isset  height           if  width  gt   imgset  maxwidth       height  gt   imgset  maxheight     re       n Width x Height       width    x     height      n The maximum Width x Height must be      imgset  maxwidth      x     imgset  maxheight          if  width  lt   imgset  minwidth       height  lt   imgset  minheight     re       n Width x Height       width    x     height     n The minimum Width x Height must be      imgset  minwidth      x     imgset  minheight          if   FILES  upload    size    gt   imgset  maxsize   1000   re       n Maximum file size must be      imgset  maxsize      KB                else if in array  type   audioset  type          if   FILES  upload    size    gt   audioset  maxsize   1000   re       n Maximum file size must be      audioset  maxsize      KB          else  re     The file       FILES  upload    name      has not the allowed extension type         set filename  if file exists  and RENAME F is 1  set  img name I        p   dir-path   fn filename to check   ex extension  i index to rename   function setFName  p   fn   ex   i       if RENAME F   1  amp  amp  file exists  p   fn   ex   return setFName  p  F NAME         i  1    ex    i  1        else return  fn   ex          f name   setFName   SERVER  DOCUMENT ROOT          upload dir  F NAME     type   0      uploadpath     SERVER  DOCUMENT ROOT          upload dir    f name      full file path       If no errors  upload the image  else  output the errors   if  re              if move uploaded file   FILES  upload    tmp name     uploadpath            CKEditorFuncNum     GET  CKEditorFuncNum           url    site   upload dir    f name         msg   F NAME        type    successfully uploaded    n- Size     number format   FILES  upload    size   1024  2              KB          re   in array  type   imgset  type       window parent CKEDITOR tools callFunction  CKEditorFuncNum    url     msg       for img           var cke ob   window parent CKEDITOR  for var ckid in cke ob instances    if cke ob instances ckid  focusManager hasFocus  break   cke ob instances ckid  insertHtml    lt audio src      url     controls gt  lt  audio gt       unfiltered html     alert      msg       var dialog   cke ob dialog getCurrent     dialog hide                else  re    alert  Unable to upload the file           else  re    alert      re            header  Content-type  text html  charset utf-8    echo   lt script gt     re     lt  script gt      Ck-editor documentation is not clear after doing alot of R amp D for custom file upload finally i have found this solution  It work for me and i hope it will helpful to others as well

User · Answer

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

[ckeditor] How can you integrate a custom file browser/uploader with CKEditor?

Examples related to ckeditor