CKEditor

CKEditor

关注
发信
关注(28)粉丝(399)

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

本文介绍了上传和浏览服务器按钮在ckeditor中不可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  WebDeveloper.Overlay.tabSelect = function（）
 {
 //如果使用元素信息工具栏的功能是活动的
 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）。 // line 7333 
} 
 
 WebDeveloper.Overlay.resetCSSStatus（）; 
 WebDeveloper.Overlay.resetJavaScriptStatus（）; 
 WebDeveloper.Overlay.updateRenderMode（）; 
};

这个错误是什么，我该如何解决？
欢迎任何帮助/建议。提前感谢。

解决方案

默认CKEditor不包含图片浏览工具...这意味着上传和浏览



http://cksource.com/ckfinder =nofollow> ckfinder ：强大的易于使用的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插件文件的链接：



您将browse.php用作JSON文件的Souce代码：

  [
 {
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，$ restricted_type））{ 
 if（$ _FILES ['upload'] ['size']> 0）{
 $ check = getimagesize（$ _ FILES [upload] [tmp_name]）; 
 if（$ check！== false&& in_array（$ check ['mime']，$ restricted_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']; 
 //可选：实例名称（可能用于加载特定的配置文件或其他任何东西）。 
 $ CKEditor = $ _GET ['CKEditor']; 
 //可选：可用于提供本地化消息。 
 $ 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（无法上传文件）;'; 
} 
} else {
 $ re ='alert（请选择允许的文件（JPG，PNG，GIF，BMP）...）;'; 
} 
} else {
 $ re ='alert（请选择允许的文件（JPG，PNG，GIF，BMP）...）;'; 
} 
} else {
 $ re ='alert（请选择允许的文件（JPG，PNG，GIF，BMP）...）;'; 
} 
} else {
 $ re ='alert（文件大小不能为空！ 
} 
} else {
 $ re ='alert（请选择允许的文件（JPG，PNG，GIF，BMP）...）;'; 
} 
} else {
 $ re ='alert（Error！）;'; 
} 
 echo< script> $ re;< / script>; 
？>

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


In my Ckeditor I amn't getting Upload and Browse Server button In Image.I am getting error as Error: TypeError: document.getElementById(...) is nullSource File: chrome://web-developer/content/overlay/javascript/overlay.jsLine: 7333In 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.

解决方案

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...

这篇关于上传和浏览服务器按钮在ckeditor中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-29 16:56
Powered by LMLPHP ©2024 CKEditor 0.008920