PHP中设置FCKeditor2.6 - 疯子的紫梦's 学习窝
require include 的区别
HTML技巧100例

PHP中设置FCKeditor2.6

疯子的紫梦 posted @ 2009年7月05日 04:11 in php , 1511 阅读

FCKeditor 是一个十分强大的网页文本编辑器,它支持多种脚本编程语言和支持多国语言.如果你还不知道或者你知道还不会配置这个的话,请你继续往下看.
我用是FCKeditot的版本是2.6,官方网站上去下载 http://www.FCKeditor.net/

本文介绍的是关于php的配置方法,其他语言略有不同.
假 设网站的目录为: \FCKeditor 一:调用FCKeditor的两种方法 1:通过创建实例 在这里只写调用它的代码了,网站的其他代码当然由你自己写了,把下面的代码加在应该加的地方. <?php include_once("FCKeditor/fckeditor.php"); //引用FCKeditor.php这个文件 $FCKeditor=new FCKeditor(''welefen''); //创建FCKeditor对象的实例 $FCKeditor->BasePath=''FCKeditor/''; //FCKeditor所在的位置,这里它的位置就是''FCKeditor/''; $FCkeditor->ToolbarSet=''Default''; //工具按钮设置 $FCKeditor->Width=''100%''; //设置它的宽度 $FCKeditor->Height=''300px''; //设置它的高度 $FCkeditor->Create(); ?> 2:通过iframe调用创建 在你认为该加的地方加上 <INPUT id=content style="DISPLAY: none" type=hidden name="welefen"> <INPUT id=content___Config style="DISPLAY: none" type=hidden> <IFRAME id=content___Frame src="FCKeditor/editor/fckeditor.html?InstanceName=welefen&amp;Toolbar=Default" frameBorder=0 width=100% scrolling=no height=300> </IFRAME>

对上述两种方法的说明:
在 上述两种方法中,你都看到了字符串''welefen'',你可能不知道是什么意思,现在我给你解释一下 如果你要将文本编辑器中的内容在另外一个页面显示或者要将在它保存在数据库,你可以用 $_POST[''welefen'']或者用$_GET[''welefen'']来获取文本编辑器中的内容,具体是用post还是用get那要看你用 的是什么传递方法了 当然你也可以把welefen改成你想要用的,如''content''.
如果你还不知道什么是ajax,那么这一段话你就 不用看了. 当你用ajax的来获得内容的时候是不是发现得不到内容,如: <script>alert(document.form.content.value)</script>你会发现谈出的窗口 没内容 那么我们可以通过下面的代码来获得它的内容: function getContentValue() { var oEditor = FCKeditorAPI.GetInstance(''content'') ; var acontent=oEditor.GetXHTML(); return acontent; }

二:配置一些文件

1:fckconfig.js的配置

(1).工具按钮设置

查找FCKConfig.ToolbarSets["Default"],这里有很多按钮,下面我们将对他们详细介绍
EditSource 显示HTML源代码 StrikeThrough 删除线 Save 保存 Subscript 下标 NewPage 新建空白页面 Superscript 上标 Preview 预览 JustifyLeft 左对齐 Cut 剪切 JustifyCenter 居中对齐 Copy 复制 JustifyRight 右对齐 Paste 粘贴 JustifyFull 两端对齐 PasteText 纯文本粘贴 InsertOrderedList 自动编号 PasteWord 来自Word的粘贴 InsertUnorderedList 项目符号 Print 打印 Outdent 减少缩进 SpellCheck 拼写检查 Indent 增加缩进 Find 查找 ShowTableBorders 显示表格线 Replace 替换 ShowDetails 显示明细 Undo 撤销 Form 添加Form动作 Redo 还原 Checkbox 复选框 SelectAll 全选 Radio 单选按钮 RemoveFormat 去除格式 Input 单行文本框 Link 插入/编辑 链接 Textarea 滚动文本框 RemoveLink 去除连接 Select 下拉菜单 Anchor 锚点 Button 按钮 Image 插入/编辑 图片 ImageButton 图片按钮 Table 插入/编辑 表格 Hidden 隐藏 Rule 插入水平线 Zoom 显示比例 SpecialChar 插入特殊字符 FontStyleAdv 系统字体 UniversalKey 软键盘 FontStyle 字体样式 Smiley 插入表情符号 FontFormat 字体格式 About 关于 Font 字体 Bold 粗体 FontSize 字体大小 Italic 斜体 TextColor 文字颜色 Underline 下划线 BGColor 背景色
这个默认的是包含了所有的工具按钮,不过到我们具体要用的时 候,有的按钮并不需要,而且还影响速度.那么我们可以将我们不需要的按钮给删了.下面是我的配置,给大家一个参考,当然你可以根据你的喜好. FCKconfig.ToolbarSets["Default"] = [ [''EditSource'',''Save'',''NewPage'',''Preview'',''-'',''Cut'',''Copy'',''Paste'',''PasteText'',''-'',''Find'',''Replace'',''-'',''Undo'',''Redo'',''-'',''SelectAll'',''-'',''Link'',''RemoveLink'',''-'',''Image'',''Table'',''Rule'',''SpecialChar'',''Smiley''] , [''Bold'',''Italic'',''Underline'',''-'',''JustifyLeft'',''JustifyCenter'',''JustifyRight'',''-'',''InsertOrderedList'',''InsertUnorderedList'',''-'',''Form'',''Checkbox'',''Radio'',''Input'',''Textarea'',''Select'',''Button'',''-'',''FontStyleAdv'',''TextColor''] ] ;
如果在前台给用户回复一写帖子的话,还是没必要要上面的,这时你可以在加一个: FCKConfig.ToolbarSets["Basic"] = [ [''Bold'',''Italic'',''-'',''OrderedList'',''UnorderedList'',''-'',''Link'',''Unlink'',''-'',''About''] ] ;
这样的话,你在前台调用的时候就要用$FCKeditor->ToolbarSet=''Basic'',不能在为"Default"了.

(2):语言的配置
查找FCKConfig.DefaultLanguage将它设置为''zh-cn''.

(3):脚本语言的设置
查 找var _FileBrowserLanguage和var _QuickUploadLanguage将他们设置为''php'', 默认是''asp'',如果这里不设置的话,图片将不能上传,这点很重要.当时我在用FCKeditor由于没配置这个,不能上传图片,而我同寝室的用 asp能上传图片,让我烦恼了好多天,最后终于找到是这个原因.

2:图片上传的配置
打开文件FCKeditor/editor /filemanager/browser/default/connectors/php/config.php 查找$Config[''Enabled''],将它设置为''true'' 查找$Config[''UserFilesPath''],将它设置图片的目录,这个目录是相对于主目录的 //例如:我写了一个blog,就可以设置为/blog/upload/
打开文件FCKeditor/editor/filemanager /upload/php/config.php 查找$Config[''Enabled''],将它设置为''true'' 查找$Config[''UseFileType''],将它设置上传文件的目录,最好与上面的图片目录相同
好了,现在所有的配置都已经完成了,现在你要做的只是删除一些不必要的文件了 只要包含''_''的目录名和文件名都可以删除,当然你用的是php,其他语言的一些目录也都可以删除,这样就减小了文件的大小.
FCKEDITOR的FCKeditor_2.6\fckeditor\_samples下有各种语言使用的例子
关键要注意设置BasePath正确,否则找不到文件.

 

 

 

 

说起 这个,更是郁闷,网上找了N篇资料,那是越看越迷糊啊,最后还是自己看代码搞定的。为了方便日后学习也小记一下吧。

1、下载FCKeditor 多国语言版

2、解压后为文件夹减肥:

删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml,fckeditor.php五个文件以外的所有文件
删除目录/editor/_source,_testcases(基本上,所有_开头的文件夹或文件都是可选的),
删除/editor/filemanager/browser/default/connectors/下除PHP目录的所有目录
删除/editor/filemanager/upload/下的除PHP目录的所有目录
删除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三个文件的所有文件

3.

 

打开/FCKeditor/fckconfig.js

 

修改

 

var FCKConfig.DefaultLanguage = 'zh-cn' ;

 

var _FileBrowserLanguage  = 'php' ;

 

var _QuickUploadLanguage  = 'php' ;

 

要 开启文件上传的话,还需要配置FCKeditor\editor\filemanager\upload\php\config.php以及 \FCKeditor\editor\filemanager\browser\default\connectors\php\config.php

 

(上传中文名文件会乱码)

 

4.调用

方法

将FCKeditor放在网站根目录

 

在PHP文件里面,包含/FCKeditor/fckeditor.php文件

 

//包含fckeditor类

 

include("../FCKeditor/fckeditor.php") ;

 

//设置编辑器路径

 

$sBasePath = "/FCKeditor/";

 

//创建一个Fckeditor,表单的名称为ipaddr

 

$oFCKeditor = new FCKeditor('ipaddr') ;

 

$oFCKeditor->BasePath  = $sBasePath ;

 

//设置表单初始值

 

$oFCKeditor->Value  = 'This is some <strong>sample text</strong>' ;

 

$oFCKeditor->Create() ;

 

//还可设置

 

$oFCKeditor->Width

 

$oFCKeditor->Height

 

$oFCKeditor->ToolbarSet

 

5.定制

 

a.定制调用路径

 

直接将FCKeditor目录改为editor/,并且在调用的时候指定根路径为/editor/。

 

b.定制风格

 

可以通过修改editor\skins目录下的Skin来定制风格,主要是修改

CSS

 

c.定制toolbar

 

在fckconfig.js中,默认定制好了Default,Basic两种toolbar,你也可以根据格式定制自己的toolbar,并且在php中使用$oFCKeditor->ToolbarSet=toolbarname调用

 

d.定制字体

 

将fckconfig.js里面的FCKConfig.FontNames字体列表前面加上:

 

宋体;黑体;隶书;楷体_GB2312;

 

(注意保存为UTF8格式)

 

e.关闭文件上传

 

i. 将fckconfig.js里面的 FCKConfig.LinkBrowser,FCKConfig.ImageBrowser,FCKConfig.FlashBrowser,FCKConfig.LinkUpload,FCKConfig.ImageUpload,FCKConfig.FlashUpload 设置为false.

 

ii.直接将filemanager里面的php文件删降

 

iii.定制toolbars

 

最重要的一点,你需要更改filemanager下面的php文件,只有认证的用户才可以访问。

 

f.注意事项:请用Editplus之类的编辑器编辑配置文件,注意保存格式为utf8.

 

 

百度空间用的好像就是fckeditor,呵呵

参考了一些网友的方法,现总结一下2.6.4版本的配置,删除不需要的文件我这儿就不说了,网上到处都是,fckeditor 2.6.4 版本中默认就是支持php的,所以不需要另外修改变量

解压到站点后,首先是对fckconfig.js的配置:

修改语言:
FCKConfig.DefaultLanguage = 'zh-cn' ;

也可以修改工具栏按钮:
FCKConfig.ToolbarSets["MyStyle"] = [
['Source','Preview','FitWindow','-','Templates'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['ShowBlocks'],
'/',
['Bold','Italic','Underline','StrikeThrough','TextColor','BGColor'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
'/',
['Style','FontFormat','FontName','FontSize']
    // No comma for the last row.
] ;

然后重要的就是修改fckeditor\editor\filemanager\connectors\php\config.php(请注意,之前的版本目录结构有些不同)使之支持文件上传:

$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/mysite/upload/' ;
   //此路径是相对于服务器根目录而言的,当然这个目录要存在咯

 

这样就行了,用法这里就不多说了,还有一点需要注意的是用fckeditor上传图片的时候,对firefox的支持好像有点问题,不能浏览本地文件上传至服务器,算是一个bug吧


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter