The result is ckeditor with browse server link next to image button but unable to see the file being browse:

Object not found!

www.roxyfileman.com/

index.php

<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>

        <script> 
            var roxyFileman = '/fileman/index.html'; 
                $(function(){
                    CKEDITOR.replace( 'editor1',{filebrowserBrowseUrl:roxyFileman,
                                filebrowserImageBrowseUrl:roxyFileman+'?type=image',
                                removeDialogTabs: 'link:upload;image:upload'}); 
                });
        </script>

        <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>

    </head>
    <body>
        <form>  

            <script>
                // Replace the &lt;textarea id="editor1"&gt; with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1', {
                    filebrowserBrowseUrl: '/browser/browse.php',
                    filebrowserUploadUrl: '/uploader/upload.php'
                });

            </script>
        </form>
    </body>
</html>

conf.json

{
"FILES_ROOT":          "fileman/Uploads",
"RETURN_URL_PREFIX":   "",
"SESSION_PATH_KEY":    "",
"THUMBS_VIEW_WIDTH":   "140",
"THUMBS_VIEW_HEIGHT":  "120",
"PREVIEW_THUMB_WIDTH": "100",
"PREVIEW_THUMB_HEIGHT":"100",
"MAX_IMAGE_WIDTH":     "1000",
"MAX_IMAGE_HEIGHT":    "1000",
"INTEGRATION":         "ckeditor",
"DIRLIST":             "php/dirtree.php",
"CREATEDIR":           "php/createdir.php",
"DELETEDIR":           "php/deletedir.php",
"MOVEDIR":             "php/movedir.php",
"COPYDIR":             "php/copydir.php",
"RENAMEDIR":           "php/renamedir.php",
"FILESLIST":           "php/fileslist.php",
"UPLOAD":              "php/upload.php",
"DOWNLOAD":            "php/download.php",
"DOWNLOADDIR":         "php/downloaddir.php",
"DELETEFILE":          "php/deletefile.php",
"MOVEFILE":            "php/movefile.php",
"COPYFILE":            "php/copyfile.php",
"RENAMEFILE":          "php/renamefile.php",
"GENERATETHUMB":       "php/thumb.php",
"DEFAULTVIEW":         "list",
"FORBIDDEN_UPLOADS":   "zip js jsp jsb mhtml mht xhtml xht php phtml php3 php4 php5 phps shtml jhtml pl sh py cgi exe application gadget hta cpl msc jar vb jse ws wsf wsc wsh ps1 ps2 psc1 psc2 msh msh1 msh2 inf reg scf msp scr dll msi vbs bat com pif cmd vxd cpl htpasswd htaccess",
"ALLOWED_UPLOADS":     "",
"FILEPERMISSIONS":     "0644",
"DIRPERMISSIONS":      "0755",
"LANG":                "auto",
"DATEFORMAT":          "dd/MM/yyyy HH:mm",
"OPEN_LAST_DIR":       "yes"
}

Dani AI

Generated

A couple of quick gotchas in your snippets explain both symptoms.

  • You are calling CKEDITOR.replace('editor1', ...) twice. The second call re-initializes the editor and discards the Roxy settings from the first one, which is why the browser link works but you still see upload issues. Keep a single CKEDITOR.replace with the Roxy URLs, and remove the extra replace block.

  • In the first snippet you wrap the init in $(function(){ ... }) but there is no jQuery include. If jQuery is not loaded, that code never runs. Either include jQuery or drop the wrapper and place the init script after the <textarea> so the element already exists.

Path and 404s: “Object not found” usually means the path to Roxy is off. Confirm the real URL by opening the Network tab and loading your page; index.html for Roxy should return 200. If your files are under /ckeditor4/fileman/, point both filebrowserBrowseUrl and filebrowserImageBrowseUrl there. Use absolute paths from the web root to avoid relative path surprises.

Uploads not working: this is almost always file system permissions or a mismatched root. Make sure:

  • fileman/Uploads actually exists and matches FILES_ROOT in conf.json.
  • The web server user can write to it. On Linux, chmod 775 on the folder and ensure the group matches the web user; on Windows/IIS, grant Modify to IIS_IUSRS.
  • PHP allows uploads and size limits are high enough (file_uploads=On, upload_max_filesize, post_max_size).

Quick sanity check on the server:

<?php
$dir = __DIR__ . '/fileman/Uploads';
var_dump($dir, is_dir($dir), is_writable($dir));

Tip: your removeDialogTabs: 'link:upload;image:upload' is correct when Roxy handles uploads. If you later enable CKEditor’s own upload, do it in the single CKEDITOR.replace call and keep Roxy as the browser. Finally, for safety, disable script execution in the uploads folder so even if someone uploads a script, it cannot run.

Getting closer. Now, the file manager start to pop up except that it cannot upload the files. Even when after I set the file upload address. I wonder why?

ckeditor4/index.php

<html>
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>

        <script> 
            var roxyFileman = '/fileman/index.html'; 
                $(function(){
                    CKEDITOR.replace( 'editor1',{filebrowserBrowseUrl:roxyFileman,
                                filebrowserImageBrowseUrl:roxyFileman+'?type=image',
                                removeDialogTabs: 'link:upload;image:upload'}); 
                });
            </script>

    </head>
    <body>
        <form>  

            <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>

            <script>
                // Replace the &lt;textarea id="editor1"&gt; with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1', {
                    filebrowserBrowseUrl: '/ckeditor4/fileman/index.html',
                    //filebrowserUploadUrl: '/ckeditor4/fileman/Uploads/Images/'
                });

            </script>

        </form>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.