用PHP调用FCKeditor$oFCKeditor=newFCKed" />
当前位置:文档之家› FCKeditor使用方法详解_在线编辑器使方法全解

FCKeditor使用方法详解_在线编辑器使方法全解

用JavaScript调用FCKeditor

include("fckeditor/fckeditor.php") ; // 用于载入FCKeditor类文件

?>

用PHP调用FCKeditor

$oFCKeditor = new FCKeditor('FCKeditor1') ; // 创建FCKeditor实例,可创建多个实例$oFCKeditor->BasePath = './fckeditor/'; // 设置FCKeditor目录地址

$oFCKeditor->Create() ; // 创建编辑器

?>

5.1、配置上传

要使您的FCKeditor能够使用上传功能,您必须进行以下配制。

注意:FCKeditor不支持虚拟目录,您的路径设置都是针对网站根目录的绝对路径而言的。这点对于发布到远程网站目录的开发者极为不便,后面我们会对此进行讨论。

三、打开fckeditor\fckconfig.js文件,找到代码_FileBrowserLanguage,将值设置为php。接下来一行,把_QuickUploadLanguage值也设置为php。

5.2、配置文件浏览

一、打开fckeditor\editor\filemanager\browser\default\connectors\php\config.php 找到代码$Config['Enabled'],将值设置为true;

二、接下来几行,设置$Config['UserFilesPath'],设置浏览路径。

5.3 、关于上传\文件浏览安全性问题

为了解决FCKeditor不支持虚拟目录问题,和FCKeditor文件上传的安全性考良。我们有必要在这里单论对此进行讨论。

打开fckeditor\editor\filemanager\upload\php\config.php,找到

$Config['UserFilesPath']代码,在此行代码之前定义变量$root_path =

$_SERVER['PHP_SELF'];

重新设置$Config['UserFilesPath']变量的值,示例如下。

$Config['UserFilesPath'] = $root_path . '您想上传的目录名/' ;

例如:/admin/admin1/upload_imgs/

打开

fckeditor\editor\filemanager\browser\default\connectors\php\config.php,找到代码$Config['UserFilesPath'],在此行代码之前定义变量$root_path =

$_SERVER['PHP_SELF'];

重新设置$Config['UserFilesPath']变量的值,示例如下。

$Config['UserFilesPath'] = $root_path . '您想浏览的目录名/'

至此,您的FCKeditor已解决不支持虚拟目录问题。接下来,我们介绍一种技巧配置只允许管理员才可以使用FCKeditor上传问题。

解决方法其实很简单,假如网站采用$_SESSION['admin_id']验证管理员的登录id,您只需将相关的脚本文件引入即可。然后使用下面的代码配置文件上传\浏览开关。$Config['Enabled'] = isset($_SESSION['admin_id']);

FCKeditor使用方法技术详解

作者:深蓝色

QQ:76863715

本文PHPChina论坛首发

本文特为《PHP5和MySQL5 Web开发技术详解》一书编写

1、概述

FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。

FCKeditor官方网站:https://www.doczj.com/doc/446945507.html,/

FCKeditor Wiki:https://www.doczj.com/doc/446945507.html,/

2、下载FCKeditor

登录FCKeditor官方站(https://www.doczj.com/doc/446945507.html,),点击网站右上角“Download”链接。笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示:

图1:下载FCKeditor 2.4.3(最新稳定版)

注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到https://www.doczj.com/doc/446945507.html,网站上自动下载。如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。

3、安装FCKeditor

解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。目录结构如下图所示:

图2:网站目录结构图

fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。

3.1、用PHP调用FCKeditor

调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。

include("fckeditor/fckeditor.php") ; // 用于载入FCKeditor类文件

?>

接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。

$oFCKeditor = new FCKeditor('FCKeditor1') ; // 创建FCKeditor实例

$oFCKeditor->BasePath = './fckeditor/'; // 设置FCKeditor目录地址

$FCKeditor->Width='100%'; //设置显示宽度

$FCKeditor->Height='300px'; //设置显示高度的高度

$oFCKeditor->Create() ; // 创建编辑器

?>

下面是笔者创建好的实例代码,您可将代码保存为add_article.php。

include("fckeditor/fckeditor.php") ; // 用于载入FCKeditor类文件

?>

用PHP调用FCKeditor

$oFCKeditor = new FCKeditor('FCKeditor1') ; // 创建FCKeditor实例,可创建多个实例$oFCKeditor->BasePath = './fckeditor/'; // 设置FCKeditor目录地址

$oFCKeditor->Create() ; // 创建编辑器

?>

通过浏览里打开http://you-address/add_article.php 查看FCKeditor安装效果。如图3所示。

图3:FCKeditor安装成功

注意:如果您想将FCKeditor创建为HTML结果代码,以便于在模板引擎里面调用(如Smarty)可使用如下代码。

$output = $oFCKeditor->CreateHtml() ;

现在,您可通过POST方式获得编辑器的变量值。本例将表单的action设置为check.php,您可在check.php里使用代码

$fckeditorValue = $_POST['FCKeditor1'];

获得编辑器的变量值了。

FCKeditor安装成功了。但是,我们还可以通过更多设置来使FCKeditor更加灵活人性化。具体方法文本后面介绍。

3.2、用JavaScript调用FCKeditor

调用FCKeditor必须先载入FCKeditor类文件,但与PHP调用方法不同,应用下面的代码。

载入FCKeditor类成功后,有三种方法创建(显示)编辑器。

一:内嵌方法(推荐)

在您想要显示FCKeditor的地方创建如下代码(通常在表单里):

下面是笔者创建好的实例代码,您可将代码保存为add_article_js.html。

用JavaScript调用FCKeditor

通过浏览里打开http://you-address/add_article_js.html 查看FCKeditor安装效果。效果和图3完全一样。

同样,如果您可以使用和前面一样的方法取得编辑器的POST变量值。$fckeditorValue = $_POST['FCKeditor1'];

二:文本区域(TEXTAREA)方法

同内嵌方法一样,也必须先载入fckeditor类。但创建(显示)编辑器同内嵌方法不同,我们需要为window.onload定义一个函数。这样,函数便可以在页面加载时执行了。函数的定义代码如下所示。

接着,您就可以在页面中(通常在表单里)定义id为MyTextarea的文本区域(TEXTAREA)。代码如下所示:

下面是笔者创建好的实例代码,显示效果当然也是一样的。笔者这里就不哆嗦了。

用JavaScript调用FCKeditor

三:适合于Ajax的调用方法

同理,您同样需要加载类文件。然后使用下面的代码对div元素创建(显示)编辑器。

var div = document.getElementById("myFCKeditor"); //使用getElementById方法取得myFCKeditor ID元素

var fck = new FCKeditor("myFCKeditor"); //创建fckeditor实例

div.innerHTML = fck.CreateHtml();//使用innerHTML方法,在myFCKeditor div元素里创建编辑器

和使用PHP调用fckeditor实例一样,用javascript方法调用fckeditor 实例也可以设置编辑器宽度和高度等。

oFCKeditor.Height = 400 ; // 400 像素

oFCKeditor.Height = "250" ; // 250 像素

oFCKeditor.Width = "100%" ; // 百分比

4、F CKeditor常用设置

FCKeditor已经安装成功了,也可以使用了。但是我们可以通过一些简单的设置使FCKeditor更加符合您的项目需求。

设置工具栏很简单,只需打开fckeditor目录下面的fckconfig.js文件,按CTRL+F搜索FCKConfig.ToolbarSets["Default"]代码,找到如下代码。

FCKConfig.ToolbarSets["Default"] = [

['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], '/',

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor'],

['FitWindow','-','About']

]

在默认情况下,FCKeditor会调用上面定义的所有工具栏按钮。大家可以根据自己的需求进行设置。表1对上面的配置选项功能说明进行汇总。

代码名称功能代码名称功能Source 源代码DocProps 页面属性

- |分隔符Save 保存

NewPage 新建Preview 预览

Templates 模板Cut 剪切

Copy 复制Paste 粘贴

PasteText 粘贴为无格式文本PasteWord 从MS Word粘贴Print 打印SpellCheck 拼写检查

Undo 撤消Redo 重做

Find 查找Replace 替换

SelectAll 全选RemoveFormat 清除格式

Form 表单Checkbox 复选框

Radio 单选框TextField 单行文本

Textarea 多行文本Select 列表菜单

Button 按钮ImageButton 图像域HiddenField 隐藏域Bold 加粗

Italic 倾斜Underline 下划线StrikeThrough 删除线Subscript 下标

Superscript 上标OrderedList 插入/删除编号列表UnorderedList 插入/删除项目列表Outdent 减少缩进

Indent 增加缩进JustifyLeft 左对齐JustifyCenter 居中对齐JustifyRight 右对齐

JustifyFull 两端对齐Link 插入/编辑链接Unlink 取消链接Anchor 插入/编辑锚点链接Image 插入编辑图像Flash 插入/编辑Flash Table 插入/编辑表格Rule 插入水平线

Smiley 插入表情SpecialChar 插入特殊符号PageBreak 插入分页Style 样式

FontFormat 格式FontName 字体

FontSize 大小TextColor 文本颜色

BGColor 背景颜色FitWindow 全屏编辑

About 关于Fuckeditor

表1:工具栏配置选项功能进行汇总

你也可以创建一个非默认的工具栏按钮设置,您可以从FCKConfig.ToolbarSets["Default"]当中的代码重新复制一份,然后将Default改成您想要的名字。

注意:fckconfig.js配置选项采用JavaScript语法,如果您不懂JavaScript的话,请在配置之前进行备份。

笔者这里配置了一个适合于大部份网站使用的工栏目按钮(取消了一些不常用的工具栏按钮,并重新布局)。

FCKConfig.ToolbarSets["MyDesign"] = [

['Cut','Copy','Paste','PasteText','PasteWord','-','Undo','Redo','-','Find','Replace','-','RemoveFor mat'],

['Link','Unlink','-','Image','Flash','Table'],

['FitWindow','-','Source'],

'/',

['FontFormat','FontSize'],

['Bold','Italic','Underline'],

['OrderedList','UnorderedList','-','Outdent','Indent'],

['JustifyLeft','JustifyCenter','JustifyRight'],

['TextColor']

] ;

要想使用自定义的工具栏按钮,必须在创建FCKeditor实例后设置使用的工具栏选项。$oFCKeditor->ToolbarSet = ' MyDesign ' ; //PHP

oFCKeditor.ToolbarSet = "MyDesign"; //JavaScript

接下来,我们对常用的一些设置选项功能进行总结,读者可参考fckeditor目录下fckconfig.js文件进行阅读。见表2

FCKConfig.AutoDetectLanguage 自动语言检查

FCKConfig.DefaultLanguage 默认语言设计,建议改成zh-cn FCKConfig.ContextMenu 右键菜单内容

FCKConfig.ToolbarStartExpanded 当页面载入的时候,工具栏默认情况下是否

展开

FCKConfig.FontColors 文字颜色列表

FCKConfig.FontNames 字体列表,可加入国内常用的字体,如宋体、

揩体、黑体等

FCKConfig.FontSizes 字号列表

FCKConfig.FontFormats 文字格式列表

FCKConfig.StylesXmlPath 指定风格XML文件路径

FCKConfig.TemplatesXmlPath 指定模板XML文件路径

FCKConfig.BodyId 设置编辑器的id

FCKConfig.BodyClass 设置编辑器的class

FCKConfig.DefaultLinkTarget 设置链接默认情况下的target属性FCKConfig.BaseHref 相对链接的基地址

FCKConfig.SkinPath 设置默认皮肤路径

FCKConfig.SmileyPath 表情文件路径,您可以设置此项更改表情FCKConfig.SmileyImage 表情文件

FCKConfig.SmileyColumns 将表情分成几列显示

FCKConfig.SmileyWindowWidth 显示表情窗口的宽度,单位像素FCKConfig.SmileyWindowHeight 显示表情窗口的高度,单位像素

表2:常用设置选项功能汇总

表2是笔者认为最重要的几个常选项,如果读者还需要更多选项的详细信息,可访问https://www.doczj.com/doc/446945507.html,/archives/2006/3467.shtml网址获得。

5、配置上传\文件浏览功能

5.1、配置上传

要使您的FCKeditor能够使用上传功能,您必须进行以下配制。

注意:FCKeditor不支持虚拟目录,您的路径设置都是针对网站根目录的绝对路径而言的。这点对于发布到远程网站目录的开发者极为不便,后面我们会对此进行讨论。

一、打开fckeditor\editor\filemanager\upload\php\config.php,找到代码

$Config['Enabled'],将值设置为true。

二、接下来几行,设置$Config['UserFilesPath'],设置上传路径。

三、打开fckeditor\fckconfig.js文件,找到代码_FileBrowserLanguage,将值设置为php。接下来一行,把_QuickUploadLanguage值也设置为php。

5.2、配置文件浏览

一、打开fckeditor\editor\filemanager\browser\default\connectors\php\config.php 找到代码$Config['Enabled'],将值设置为true;

二、接下来几行,设置$Config['UserFilesPath'],设置浏览路径。

5.3 、关于上传\文件浏览安全性问题

为了解决FCKeditor不支持虚拟目录问题,和FCKeditor文件上传的安全性考良。我们有必要在这里单论对此进行讨论。

打开fckeditor\editor\filemanager\upload\php\config.php,找到

$Config['UserFilesPath']代码,在此行代码之前定义变量$root_path =

$_SERVER['PHP_SELF'];

重新设置$Config['UserFilesPath']变量的值,示例如下。

$Config['UserFilesPath'] = $root_path . '您想上传的目录名/' ;

打开

fckeditor\editor\filemanager\browser\default\connectors\php\config.php,找到代码$Config['UserFilesPath'],在此行代码之前定义变量$root_path =

$_SERVER['PHP_SELF'];

重新设置$Config['UserFilesPath']变量的值,示例如下。

$Config['UserFilesPath'] = $root_path . '您想浏览的目录名/'

至此,您的FCKeditor已解决不支持虚拟目录问题。接下来,我们介绍一种技巧配置只允许管理员才可以使用FCKeditor上传问题。

解决方法其实很简单,假如网站采用$_SESSION['admin_id']验证管理员的登录id,您只需将相关的脚本文件引入即可。然后使用下面的代码配置文件上传\浏览开关。$Config['Enabled'] = isset($_SESSION['admin_id']);

6、F CKeditor Api

最详细的FCKeditor Api文档默过于官方wiki提供的文档了。

FCKeditor Api官方文档地址:https://www.doczj.com/doc/446945507.html,/Developer's_Guide/Javascript_API 下面提供国内某网友的翻译文档,转载地址:https://www.doczj.com/doc/446945507.html,/article.asp?id=322

FCK 编辑器加载后,将会注册一个全局的FCKeditorAPI 对象。

FCKeditorAPI 对象在页面加载期间是无效的,直到页面加载完成。如果需要交互式地知道FCK 编辑器已经加载完成,可使用"FCKeditor_OnComplete"函数。

在当前页获得FCK 编辑器实例:

var Editor = FCKeditorAPI.GetInstance('InstanceName');

从FCK 编辑器的弹出窗口中获得FCK 编辑器实例:

var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的FCK 编辑器实例:

var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的FCK 编辑器实例:

var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得FCK 编辑器的内容:

oEditor.GetXHTML(formatted); // formatted 为:true|false,表示是否按HTML格式取出也可用:

oEditor.GetXHTML();

设置FCK 编辑器的内容:

oEditor.SetHTML("content", false); // 第二个参数为:true|false,是否以所见即所得方式

设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。

插入内容到FCK 编辑器:

oEditor.InsertHtml("html"); // "html"为HTML文本

检查FCK 编辑器内容是否发生变化:

oEditor.IsDirty();

在FCK 编辑器之外调用FCK 编辑器工具条命令:

命令列表如下:

-------------------------------------DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo

-------------------------------------使用方法如下:

-------------------------------------https://www.doczj.com/doc/446945507.html,mands.GetCommand('FitWindow').Execute();

-------------------------------------7、精简FCKeditor文件空间大小

FCKeditor目录下面包含有许多示例代码,文档等资源,在我们的WEB项目正式发布式前,这些文件不但没有任何意义,反而会占用相当大的空间。下面我们介绍如何删除这些文件。一:删除所有以“_”开头的文件夹

二:删除fckeditor目录下面除fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php、fckpackager.xml、fckstyles.xml、fcktemplates.xml、editor目录以外的所有文件(即,只保留刚才提到的几个文件和一个目录)。

三:进入fckeditor\editor\filemanager\browser\default\connectors文件夹,只保留PHP文件夹和test.html文件。

四:进入fckeditor\editor\filemanager\upload文件夹,只保留PHP文件夹和test.html文件。五:进入fckeditor\editor文件夹,这个目录下面是一些语言包文件。除保留_getfontformat.html、_translationstatus.txt、en.js、zh.js、zh-cn.js外,其它语言包对国内项目来说意义不大,可以删除。

六:进入fckeditor\editor\skins文件夹,该文件夹保存FCKeditor文件,如果您不想用可以删除。

相关主题
文本预览
相关文档 最新文档