上传和浏览服务器按钮在ckeditor中不可见 [英] upload and browse server button not visible in 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 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.
解决方案
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中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
