CKEditor的原包中没有包含图片的上传服务器端处理文件,其公司的另一款开源产品:CKFinder做了很好的补充。但是要下载这个源代码再进行配置,虽然方便了很多,但是仅仅为了上传图片,却要使用这么大的整个系统来使用,确实有点大材小用,我花了一个下午的时间,自己用PHP脚本写了一个处理上传文件的脚本代码,没有做更多的安全处理,希望对大家有用。
首先,在你的config.js文件里添加如下代码:
CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = './upload.php?type=img';
config.filebrowserFlashUploadUrl = './upload.php?type=flash';
};
以上的配置是上传要处理到的文件的地址,你可以根据自己情况进行修改。upload.php文件如下:
<?php
/*
CKEditor_upload.php
monkee
2009-11-15 16:47
*/
$config=array();
$config['type']=array("flash","img"); //上传允许type值
$config['img']=array("jpg","bmp","gif"); //img允许后缀
$config['flash']=array("flv","swf"); //flash允许后缀
$config['flash_size']=200; //上传flash大小上限 单位:KB
$config['img_size']=500; //上传img大小上限 单位:KB
$config['message']="上传成功"; //上传成功后显示的消息,若为空则不显示
$config['name']=mktime(); //上传后的文件命名规则 这里以unix时间戳来命名
$config['flash_dir']="/ckeditor/upload/flash"; //上传flash文件地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['img_dir']="/ckeditor/upload/img"; //上传img文件地址 采用绝对地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['site_url']=""; //网站的网址 这与图片上传后的地址有关 最后不加"/" 可留空
//文件上传
uploadfile();
function uploadfile()
{
global $config;
//判断是否是非法调用
if(empty($_GET['CKEditorFuncNum']))
mkhtml(1,"","错误的功能调用请求");
$fn=$_GET['CKEditorFuncNum'];
if(!in_array($_GET['type'],$config['type']))
mkhtml(1,"","错误的文件调用请求");
$type=$_GET['type'];
if(is_uploaded_file($_FILES['upload']['tmp_name']))
{
//判断上传文件是否允许
$filearr=pathinfo($_FILES['upload']['name']);
$filetype=$filearr["extension"];
if(!in_array($filetype,$config[$type]))
mkhtml($fn,"","错误的文件类型!");
//判断文件大小是否符合要求
if($_FILES['upload']['size']>$config[$type."_size"]*1024)
mkhtml($fn,"","上传的文件不能超过".$config[$type."_size"]."KB!");
//$filearr=explode(".",$_FILES['upload']['name']);
//$filetype=$filearr[count($filearr)-1];
$file_abso=$config[$type."_dir"]."/".$config['name'].".".$filetype;
$file_host=$_SERVER['DOCUMENT_ROOT'].$file_abso;
if(move_uploaded_file($_FILES['upload']['tmp_name'],$file_host))
{
mkhtml($fn,$config['site_url'].$file_abso,$config['message']);
}
else
{
mkhtml($fn,"","文件上传失败,请检查上传目录设置和目录读写权限");
}
}
}
//输出js调用
function mkhtml($fn,$fileurl,$message)
{
$str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', \''.$fileurl.'\', \''.$message.'\');</script>';
exit($str);
}
?>
附上这个upload.php文件的下载地址http://download.csdn.net/source/1795185
分享到:
相关推荐
3. 集成CKFinder:在CKEditor的配置文件(通常为`config.js`)中,设置图片上传插件,如: ```javascript CKEDITOR.editorConfig = function(config) { config.filebrowserBrowseUrl = 'path/to/ckfinder/ckfinder....
2. **配置CKEditor**:在CKEditor的配置文件(通常是`config.js`)中,你需要设置图片上传的插件以及CKFinder的路径。例如,你可以添加以下代码: ``` CKEDITOR.editorConfig = function( config ) { config....
**ckeditor4.2.2自定义配置** CKEditor是一款强大的富文本编辑器,广泛应用于网页内容编辑、CMS系统以及各种在线文档处理。CKEditor 4.2.2是该系列的一个较早版本,但仍然包含丰富的功能和高度的可定制性。在实际...
在IT行业中,富文本编辑器CKEditor 4是一款广泛应用的在线文本编辑工具,它提供了丰富的功能,如格式化、图片上传、链接管理等。本文将深入探讨如何为CKEditor 4自定义音频和视频上传插件,以满足特定的媒体处理需求...
在ASP环境中,CKFinder可以通过设置配置文件来与服务器上的文件系统交互,实现图片和其他文件的上传到指定目录,并返回URL供CKEditor插入到文档中。 在本实例中,我们看到有以下几个关键文件: 1. `index.asp` - ...
1. **配置**:首先,你需要在CKEditor的配置文件中设置允许图片上传的相关参数,如上传路径、文件类型限制、大小限制等。可以通过`config.filebrowserUploadUrl`或`config.filebrowserImageUploadUrl`来指定上传的...
CKFinder则是一个与CKEditor配套的文件管理工具,允许用户上传、浏览、管理和插入图片、文档等多媒体资源。将这两者结合起来,可以构建一个功能强大的在线内容创作环境。 **CKEditor 4.2 知识点** 1. **CKEditor ...
CKEditor和CKFinder是两个非常流行的开源Web内容编辑器和文件...通过以上步骤,你可以成功地在你的项目中配置CKEditor和CKFinder,实现用户友好的图片上传功能。这不仅提升了用户体验,也简化了网站后台的内容管理。
为了支持这些功能,开发者可能需要配置CKEditor的插件设置,包括定义上传图片的URL、设置上传参数以及处理服务器返回的数据。此外,可能还需要在服务器端编写相应的接口来接收并处理图片上传请求,这部分通常是根据...
3. **配置CKFinder与CKEditor的连接**:在CKEditor的配置文件(通常是`config.js`)中,需要添加CKFinder的配置项,指定CKFinder的位置和使用的语言。例如: ```javascript CKEDITOR.editorConfig = function( ...
CKEditor是一款强大的富文本编辑器,提供丰富的文本格式化选项,而CKFinder则是一个文件管理器,用于在网页中上传、浏览和管理图片、文档等资源。 CKEditor 4.2.2 是 CKEditor 的一个版本,它提供了许多改进和新...
5. **高度可定制**:CKeditor的外观和行为可以通过配置选项进行调整。开发者可以改变编辑器的主题,选择显示或隐藏某些工具栏按钮,甚至自定义编辑器的行为。 6. **源码编辑模式**:除了WYSIWYG(所见即所得)模式...
### CKEditor与CKFinder(Java版)整合实现图片上传的知识点 #### 1. CKEditor配置详解 **下载与安装** - **下载地址**: [http://ckeditor.com/download](http://ckeditor.com/download) - **安装步骤**: - 解压...
在这个"CKEditor带图片上传案例"中,我们将探讨如何配置CKEditor以支持用户在编辑内容时上传图片,并确保图片能正确显示。 首先,我们需要理解CKEditor的基本结构。它是一个JavaScript库,通过在网页上创建一个可...
而Ckfinder则是一个与CKEditor配套的文件管理器,它提供了文件和图片的上传、浏览、管理和删除等功能。 首先,CKEditor的核心功能在于提供一个类似于桌面文字处理软件的编辑体验。用户可以在网页上看到实时预览,...
安装和使用Ckeditor通常需要在网页中引入这些文件,并根据项目需求进行配置,比如设置工具栏、定制插件、调整图片上传的后端接口等。 总的来说,Ckeditor作为一个功能全面的在线编辑器,它的图片上传功能极大地提升...
在这个"ckEditor配置demo"中,我们将深入探讨如何配置CKEditor,特别是其图片上传功能和插入高亮代码片段的设置。 首先,我们需要了解CKEditor的基本配置。在使用CKEditor时,通常需要通过JavaScript API或配置文件...
"ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传"是一个关于CKEditor自定义插件的实践案例,通过JavaScript实现了图片上传功能。下面将详细阐述这一知识点及其相关技术。 首先,CKEditor是一款开源...
CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具,它们在网页内容编辑和上传文件方面提供了强大的功能。CKEditor是一个富文本编辑器,而CKFinder则作为一个插件,为CKEditor提供了一个方便的文件...
CKEditor是一款强大的富文本编辑器,而CKFinder则是一个文件管理器,两者结合可以提供一个完整的解决方案,让用户方便地编辑文本并上传图片、文件等资源。 首先,我们来详细了解一下CKEditor的配置步骤: 1. **...