Question

在我的Ckeditor中，我无法在Image中获取上传和浏览服务器按钮。我收到错误错误：TypeError：document.getElementById（...）为null 源文件：chrome：//web-developer/content/overlay/javascript/overlay.js 行：7333 在所述js的第7333行中是以下代码

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();
};

这是什么意思？我该如何解决这个问题？欢迎任何帮助/建议。提前谢谢。

Answer 1

我们下载的默认CKEditor不包含图像浏览工具，我们需要一个额外的插件来实现此功能。

请尝试下载最新的CKEditor并尝试从此处集成文件浏览插件

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

Answer 2

默认的CKEditor不包含图像浏览工具......这意味着上传和浏览按钮不会出现......

这里有3个选项：

1-使用ckfinder：强大＆amp;易于使用的Web浏览器Ajax文件管理器

2-使用其他免费插件，我建议：AjexFileManager插件......

3-使用您自己的代码，下面是我在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"
});

这是源代码：

imagebrowser插件文件的链接：here

Souce Code for browse.php作为JSON文件：

[
    {
        "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"
    }
]

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>";
?>

如果您需要任何帮助，请告诉我......

上传和浏览服务器按钮在ckeditor中不可见

2 个答案: