Ckeditor下载地址:http://ckeditor.com/download
1、在页面中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2、在使用编辑器的地方插入HTML控件
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
3、将相应的控件替换成编辑器代码
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
</script>
4、配置编辑器
ckeditor的配置都集中在 ckeditor/config.js 文件中(自定义,可选)
5、配置图片上传(编辑器插件中必须包含图片插件,默认图片的编辑器只能使用外部链接)
6、去掉预览中的文字
在ckeditor/plugins/image/dialogs/image.js
搜索“d.config.image_previewText”,把(d.config.image_previewText||”)加粗的内容全删了。
7、开启上传功能
在ckeditor/plugins/image/dialogs/image.js
搜索:id:’Upload’,hidden:!0
实际上上传功能被隐藏了,把上面的!0改成false。
到这里图片上传控件已经可以显示,接下来需要做PHP文件处理
8、定义上传图片时的action
在ckeditor/config.js中加入:
config.filebrowserUploadUrl = '/index.php?action=address&do=upload'; //地址自定义
9.在php处理文件中加入upload方法;
if($do == "upload"){
upload();
}
function upload(){
$extensions = array("jpg","bmp","gif","png");
$uploadFilename = $_FILES['upload']['name'];
$uploadFilesize = $_FILES['upload']['size'];
if($uploadFilesize > 1024*2*1000){
echo "<font color=\"red\"size=\"2\">*图片大小不能超过2M</font>";
exit;
}
$extension = pathInfo($uploadFilename,PATHINFO_EXTENSION);
if(in_array($extension,$extensions)){
$uploadPath ="./uploadfile/";
$uuid = str_replace('.','',uniqid("",TRUE)).".".$extension;
$desname = $uploadPath.$uuid;
$previewname = './uploadfile/'.$uuid;
$tag = move_uploaded_file($_FILES['upload']['tmp_name'],$desname);
$callback = $_REQUEST["CKEditorFuncNum"];
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$previewname."','');</script>";
}else{
echo "<font color=\"red\"size=\"2\">*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)</font>";
}
}
10、上传成功。