CODEWITHSUNDEEP
ckeditor
samjhana joshi
samjhana joshi

Reputation: 2015

upload and browse server button not visible in ckeditor

In my Ckeditor I amn't getting Upload and Browse Server button In Image.I am getting error as Error: TypeError: document.getElementById(...) is null Source File: chrome://web-developer/content/overlay/javascript/overlay.js Line: 7333 In line 7333 of the said js is the following code

WebDeveloper.Overlay.tabSelect = function()
{
  // If a feature that uses the element information toolbar is active
  if(WebDeveloper.Dashboard.isOpenInDashboard(WebDeveloper.Locales.getString("elementInformation")) || WebDeveloper.Dashboard.isOpenInDashboard(WebDeveloper.Locales.getString("styleInformation")))
  {
    document.getElementById("web-developer-element-information-toolbar").hidden = false;
  }
  else
  {
    document.getElementById("web-developer-element-information-toolbar").hidden = true; //line 7333
  }

  WebDeveloper.Overlay.resetCSSStatus();
  WebDeveloper.Overlay.resetJavaScriptStatus();
  WebDeveloper.Overlay.updateRenderMode();
};

What is this eror and how am i to solve this? Any help/suggestions are welcome. Thanks in advance.

Upvotes: 0

Views: 5677

Answers (2)

Moe
Moe

Reputation: 501

The default CKEditor doesn't contain Image Browsing Facility... And this mean that the upload and browse button will not appear...

You have 3 options here:

1- use ckfinder : Powerful & easy to use Ajax file manager for web browsers

2- Use another free plugins and I suggest : AjexFileManager plugin...

3- Use your own code and here below is the code that I used in my CKeditor:

CKEDITOR.replace(YOUR_CKEDITOR_ID, {
    filebrowserBrowseUrl : 'ckeditor/plugins/imagebrowser/browser/browser.html?listUrl=browse.php",
    filebrowserImageBrowseUrl : 'ckeditor/plugins/imagebrowser/browser/browser.html?listUrl=browse.php",
    filebrowserUploadUrl : 'ckeditor/upload.php?type=Images',
    filebrowserImageUploadUrl : 'ckeditor/upload.php?type=Images',
    imageBrowser_listUrl : "browse.php"
});

And here's the source code:

Link of imagebrowser plugin files: here

Souce Code for you browse.php as JSON file:

[
    {
        "image": "/image1_200x150.jpg",
        "thumb": "/image1_thumb.jpg",
        "folder": "Small"
    },
    {
        "image": "/image2_200x150.jpg",
        "thumb": "/image2_thumb.jpg",
        "folder": "Small"
    },

    {
        "image": "/image1_full.jpg",
        "thumb": "/image1_thumb.jpg",
        "folder": "Large"
    },
    {
        "image": "/image2_full.jpg",
        "thumb": "/image2_thumb.jpg",
        "folder": "Large"
    }
]

Source Code for upload.php:

<?php
$limited_ext = array(".jpg",".jpeg",".png",".gif",".bmp");
$limited_type = array("image/jpg","image/jpeg","image/png","image/gif","image/bmp");
$not_allowed = array(".php", ".exe", ".zip", ".rar", ".js", ".txt", ".css", ".html", ".htm", ".doc", ".docx");

$nameUpload = strtolower(basename($_FILES['upload']['name']));
$typeUpload = strtolower($_FILES['upload']['type']);

if( isset($_FILES['upload']) && strlen($nameUpload) > 1 ) {
    if ( in_array($typeUpload,$limited_type) ) {
        if( $_FILES['upload']['size'] > 0 ) {
            $check = getimagesize($_FILES["upload"]["tmp_name"]);
            if( $check !== false && in_array($check['mime'],$limited_type) ) {
                $notAllowFlag = 0;
                foreach( $not_allowed as $notAllow ) {
                    $pos = strpos($nameUpload, $notAllow);
                    if( $pos !== false ) {
                        $notAllowFlag = 1;
                    }
                }
                if( $notAllowFlag == 0 ) {
                    $ext = strrchr($nameUpload,'.');
                    if ( in_array($ext,$limited_ext) ) {
                        $funcNum    = $_GET['CKEditorFuncNum'] ;
                        // Optional: instance name (might be used to load a specific configuration file or anything else).
                        $CKEditor   = $_GET['CKEditor'] ;
                        // Optional: might be used to provide localized messages.
                        $langCode   = $_GET['langCode'] ;
                        $uploadurl  = URL_WEBSITE . 'uploads/editor/';
                        $uploaddir  = 'uploads/editor/'; //$uploaddir set permission 777 (unix)

                        $new_file_name = rand(100000,999999) . $ext;
                        while ( is_file( $uploaddir . $new_file_name) ) {
                            $new_file_name = rand(100000,999999) . $ext;
                        }
                        if ( move_uploaded_file($_FILES['upload']['tmp_name'], $uploaddir . $new_file_name) ) {
                           $url = $uploadurl . $new_file_name;
                           $re = "window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', 'Uploaded successfully...');";
                        } else {
                            $re = 'alert("Unable to upload the file");';
                        }
                    } else {
                        $re = 'alert("Please select an allowed files ( JPG, PNG, GIF, BMP)...");';
                    }
                } else {
                    $re = 'alert("Please select an allowed files ( JPG, PNG, GIF, BMP)...");';
                }
            } else {
                $re = 'alert("Please select an allowed files ( JPG, PNG, GIF, BMP)...");';
            }   
        } else {
            $re = 'alert("File size cannot be null!");';
        }
    } else {
        $re = 'alert("Please select an allowed files ( JPG, PNG, GIF, BMP)...");';
    }
} else {
    $re = 'alert("Error!");';
}
echo "<script>$re;</script>";
?>

Let me know if you need any assistance in this...

Upvotes: 1

Raman
Raman

Reputation: 169

The default CKEditor we download doesn't contain Image Browsing Facility, we need an extra plugin for this functionality.

please try to download the latest CKEditor and try to integrate File Browsing Plugin from here

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29

Upvotes: 1

Related Questions