Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

FCKeditor 的配置和使用方法

Posted on 2007-08-08 03:26  analyzer  阅读(645)  评论(0编辑  收藏  举报

FCKeditor是一个十分强大的网页文本编辑器,它支持多种脚本编程语言和
                       支持多国语言。如果你还不知道或者你知道还不会配置这个的
话,请你继续往下看。

    我用是 FCKeditor 的版本是2.1,不过现在已经有 FCKeditor 2.3.2 released 版本
了,你可以到他的官方网站上去下载 http://www.FCKeditor.net/

    本文介绍的是关于 php 的配置方法,其他语言的配置方法是和它一样的。

    假设网站的目录为:

    \www
    \index.php
    \inc
    \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=Defaul
 t" frameBorder=0 width=100% scrolling=no height=300> 
 </IFRAME> 

3、对上述两种方法的说明

     在上述两种方法中,你都看到了字符串'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','RemoveL
  ink','-','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,其他语言的一些目录
也都可以删除,这样就减小了文件的大小.

我要啦免费统计