ckeditor文本编辑+ckfinder文本图片上传

<!--
//==============================================安装配置ckeditor
http://ckeditor.com/download 下载ckeditor,Standard package为标准包
http://cksource.com/ckfinder/trial 下载ckfinder php版本

将ckeditor压缩包内ckeditor文件夹解压到想要放到的目录中,这里解压到项目根目录
根目录下新建文件 index.php,代码如下
-->
<script language="JavaScript" type="text/javascript" src="./ckeditor/ckeditor.js"></script>

<form name="form1" action="action.php" method="post">
    <textarea name="form1_textarea" class="ckeditor" cols="80" name="content" rows="10"></textarea>
    <input type="submit" name="submit" value="提交"/>
</form>

<script type="text/javascript">
CKEDITOR.replace( 'form1_textarea', {   //如果将textarea标签的class设成class="ckeditor"则此段CKEDITOR.replace可不用写,但要单独设置参数或打开上传功能则需要用此法添加参数
    fullPage          : true,           //是否使用完整的html编辑模式 如使用,其源码将包含:<html><body></body></html>等标签
    extraPlugins      : 'wysiwygarea',  //添加新组件
    width             : 600,            //编辑器宽度
    height            : 600,            //编辑器高度
    baseFloatZIndex   : 0               //编辑器的z-index值

});
</script>

<!--
要全局配置则在ckeditor下的config.js中CKEDITOR.editorConfig里添加参数
格式;
CKEDITOR.editorConfig = function( config ) {
    config.width  = 700;     //编辑器宽度
    config.height = 700;     //编辑器高度
};

CKEditor配置参数很多
至此即可使用ckeditor
-->



<!--
//==============================================安装配置CKfinder
将ckfinder压缩包内ckfinder文件夹解压缩到已有的ckeditor文件夹内

Ckfinder默认配置是不能上传文件到服务器的,所以要对ckfinder文件夹下的config.php做修改,将其文件里的CheckAuthentication() 返回值return false; 改为 return true;。
CheckAuthentication()这个函数原意是做使用者的身份验证,可以在这里做网站一些验证,不通过不能上传

ckfinder文件夹下的config.php中的$baseUrl修改图片上传路径$baseUrl的根目录默认是设为服务器根目录的,所以最好从项目名下的某个具体路径,这里设为 $baseUrl = 'http://localhost/cked/upload/';

要实现上传功能在该textarea的CKEDITOR.replace里还需添加如下参数
-->
<script type="text/javascript">
CKEDITOR.replace( 'form1_textarea', {
    filebrowserBrowseUrl      : 'ckeditor/ckfinder/ckfinder.html',                                                   //查看CK源码得知浏览服务器按钮有个这种属性指点击后启用的URL,这里指载入CKfinder
    filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images',                                       //点击CK图片按钮时浏览服务器按钮浏览图片存储的文件夹
    filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash',                                        //点击flash按钮时浏览服务器按钮浏览图片存储的文件夹
    filebrowserUploadUrl      : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', //指启用上传,并指定上传文件调用的php文件
    filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',//上传图品文件时调用的php文件
    filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'  //上传flsh时调用的php文件
});

</script>

<!--
有的说还要引用下<script language="JavaScript" type="text/javascript" src="./ckeditor/ckfinder/ckfinder.js"></script>文件,但这里没引用一样可用

//======================CKfinder参数设置
在ckfinder文件夹下的config.php中$config['Thumbnails']用于设置缩略图的部分限制,比如设置缩略图的最大宽度高度等

$config['Images']用于限定上传图片最大宽度高度等

$config['ResourceType'][]用于设定各类文件的上传限制
$config['ResourceType'][] = Array(
    'name' => 'Flash',                 //类别名为Flash
    'url' => $baseUrl . 'flash',       //取该类文件的URL
    'directory' => $baseDir . 'flash', //存储该类文件的文件夹
    'maxSize' => 0,                    //限制该类文件可上传最大值
    'allowedExtensions' => 'swf,flv',  //该类文件允许上传的文件类型
    'deniedExtensions' => ''           //该类文件禁止上传的文件类型;
);


接收页面
<?php
$content = $_POST['form1_textarea'];

//当 magic_quotes_gpc 打开时,所有的 ' (单引号), " (双引号), \ (反斜线) and 空字符会自动转为含有反斜线的转义字符。
//当输出字符串时,htmlspecialchars将字符串处理把包含的类似<br/>标签等显示在网页上
get_magic_quotes_gpc()?$content=htmlspecialchars($content):$content=htmlspecialchars(addslashes($content));

//使用$content表示从数据库中提取的数据stripslashes() 函数删除由 addslashes() 函数添加的反斜杠。
get_magic_quotes_gpc()?$content=$content:$content=stripslashes ($content);

echo $content;
//也可不处理直接存入数据库中,则显示时编辑器中看到的就是显示在网页上的
?>
-->

 

posted @ 2013-01-28 18:21  风吹屁股凉冰冰  阅读(1318)  评论(0编辑  收藏  举报