PHP+CKEditor 3配置详细说明(包括图片上传)

原创 2012年03月30日 18:03:46

首先,我们要在页面中加入CKEditor的js文件:

    <head>
        ...
        <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    </head>

    其次,在你要插入编辑器的地方插入如下代码:

    <textarea name="editor">文本的默认HTML代码</textarea>

    其中,"editor"是以后你要传给后台脚本语言的post名,也是js要用到的名称。然后,在该页的最底下插入:

    <script type="text/javascript">
         CKEDITOR.replace( 'editor');
    </script>

    上面这段js代码要在你的页面载入完成后插入,你也可以把它放在windows.onload中。

    这样,测试一下,一个简单的编辑器就完成了。

    接下来,我们要对我们的编辑器做一配置,配置的方式有很多,为了方便起见,我选择了目录下的config.js文件来进行配置。很多的配置我们都可以使用默认值,在这里,常用的配置如下,如果你想了解全部的配置信息,可以到这里来查看,也可以到CKEditor的官方网站看文档。

    //界面的语言配置 设置为'zh-cn'即可
    config.defaultLanguage = 'en';

    //默认的字体名 plugins/font/plugin.js
    config.font_defaultLabel = 'Arial';

    //字体编辑时的字符集 可以添加常用的中文字符:宋体、楷体、黑体等 plugins/font/plugin.js
    config.font_names = 'Arial;Times New Roman;Verdana';

    //字体编辑时可选的字体大小 plugins/font/plugin.js
    config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

    //编辑器的高度
    config.height = 200

    //界面的现实语言 可选择"zh-cn"
    config.language = true

    //可选界面包
    config.skin = 'default';

    //使用的工具栏 plugins/toolbar/plugin.js 当然你也可以使用自己的工具栏
    config.toolbar = ‘Full'
    这将配合:
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

    config.toolbar = 'Buaa'; //选择界面功能
//定义界面工具
config.toolbar_Buaa =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor']
];

    //编辑器的宽度 plugins/undo/plugin.js
    config.width = ""

 

 

 图片上传

  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

版权声明:本文为博主原创文章,未经博主允许不得转载。

PHP+CKEditor&nbsp;3配置详细说明(包括…

首先,我们要在页面中加入CKEditor的js文件:             ...                 其次,在你要插入编辑器的地方插入如下代码:     文本的默认HTML代码...

CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩

备注:不支持附件,如需附件请移至我的资源库               http://download.csdn.net/detail/jiangjiayong/3871706 ...

CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩

CKEditor 3.x配置说明 基本使用:  1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip   下载地址:http://ck...

CKEditor 3.x 在Java中配置、包括图片上传、支持FTP、图片压缩

备注:不支持附件,如需附件请移至我的资源库               http://download.csdn.net/detail/jiangjiayong/3871706 CKEd...

PHP中配置Ckeditor和Ckfinder(实现图片上传)

CKEditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器,FCKeditor是它的前身。CKEditor不提供文件上传功能,如果要实现上传功能则需要使用CKFinder。 1、...

CKEditor 简单图片上传插件开发和详细步骤

CKEditor插件使用方法就不在这里赘述了,这里只讲CKEditor的插件开发,下面是官方开发的指南的地址 官方插件开发指南CKEditor插件目录 - ckeditor 根目录/ ...

CKEditor图片上传实现详细步骤(使用Struts 2)

url:   http://blog.csdn.net/xiao__gui/article/details/7684505 本人使用的CKEditor版本是3.6.3。CKE...

CKEditor图片上传实现详细步骤(使用Struts 2)

本人使用的CKEditor版本是3.6.3。CKEditor配置和部署我就不多说。 CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PHP+CKEditor 3配置详细说明(包括图片上传)
举报原因:
原因补充:

(最多只允许输入30个字)