21-PHP环境下的FCKEditor编辑器的配置

 

21-PHP环境下的FCKEditor编辑器的配置

今天有朋友问PHP环境下的FCKEditor编辑器的配置问题，那么咱们今天就来看一下下吧！

在咱们使用PHP开发WEB项目的时候，常常会使用多行文本框来收集信息，如新闻系统的新闻正文、论坛的帖子正文等。并且咱们常常须要对多行文本框的内容进行修饰（如字体、字号等），若是咱们经过JS来实现的话，其操做过程是很是繁琐的。如今比较经常使用的是FCKEditor编辑器来实现，经过这个编辑器咱们能够轻松的控制内容的样式。如今，咱们就来看看在PHP下如何来配置FCKEditor编辑器。

1. 下载FCKEditor编辑器

网址: http://ckeditor.com/download

在众多的版本中，咱们选择2.6.5版便可。

2. 将下载的文件解压到主目录，解压后的效果以下(图1、二所示)
 

 

 

3. 将解压后的文件保留editor文件夹、fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php、fckpackager.xml、fckstyles.xml、fcktemplates.xml后，删除其余文件。(以下图)

 

 

 
4. 安装

FCKEditor的安装是很是简单的：只须要在相关的网页中包含fckeditor.php文件便可

如require_once(“fckeditor.php”);

当把fckeditor.php文件包含过来之后，安装程序就算完毕了，那么关键的问题是如何来应用FCKEditor编辑器

FCKEditor编辑器的实现是经过OOP的编程方式实现的，因此在应用以前必须先行建立对象(或者称为实例)，其语法结构以下：

$FCKEditorObj = new FCKEditor(“实例名称”) ;

这里的”实例名称”其实指得是多行文本框的名称，因此，咱们必须赋予含义明确的名称。如

$FCKEditorObj = new FCKEditor(“content”);

5. FCKEditor对象的属性

Width

功能：设置/获取编辑器的宽度

语法：

$对象名称 -> Width = “值”;

$变量名称 = $对象名称 -> Width;

Height

功能：设置/获取编辑器的高度

语法：

$对象名称 -> Height = “值”;

$变量名称 = $对象名称 -> Height;

说明：

编辑器的默认宽度为100%；默认的高度为200像素

另外，在用户设置宽度或高度时，若是指定的单位为像素，那么能够直接书写宽度/高度值，而无需指定单位，但指定的单位为百分比时，则必须指定单位--%

如

$FCKEditorObj –> Width = “85%”;

$FCKEditorObj -> Height = “400”;

ToolbarSet

功能:获取/设置编辑器使用的工具栏

语法:

$对象名称 -> ToolbarSet  = “工具栏名称”;

$变量名称 = $对象名称 -> ToolbarSet;

说明:

系统默认的工具栏有:Default和Basic两个

BasePath

功能：获取/设置编辑器所在的路径

语法:

$对象名称 -> BasePath = “路径”;

$变量名称 = $对象名称 -> BasePath;

Value

功能:设置/获取编辑器的初始值

语法:

$对象名称 -> Value = “值”;

$变量名称 = $对象名称 -> Value;

 

说明：在通常状况下，只有在修改内容时才会设置初始值；

Config

功能：获取/设置编辑器的配置参数

语法:

$对象名称 -> Config[‘参数’] = 值;

$变量名称 = $对象名称 -> Config[‘参数’];

对于参数，咱们之后再详细来了解！

6. FCKEditor对象的方法

Create()

功能：显示FCKEditor编辑器

语法:

$对象名称 -> Create();

CreateHtml()

功能:返回运行FCKEditor编辑器的必须的HTML代码

语法:

$变量名称 = $对象名称 -> CreateHtml();

其实，Create()方法就是将CreateHtml()方法的返回结果给输出了！

咱们先来看一个简单的例子！

<?php

 

require_once "editor/fckeditor.php";

 

$oFCKeditor = new FCKeditor("content");

 

$oFCKeditor -> Width       = "100%";

 

$oFCKeditor -> Height      = "350";

 

$oFCKeditor -> ToolbarSet = "Default";

 

$oFCKeditor -> BasePath       = "editor/";

 

$html = $oFCKeditor -> CreateHtml();

 

?>

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

 

< html xmlns = "http://www.w3.org/1999/xhtml" >

 

< head >

 

< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />

 

< title > 发表主题 </ title >

 

< link href = "style/common.css" rel = "stylesheet" type = "text/css" media = "all" />

 

</ head >

 

< body >

 

< div id = "container" >

 

< h1 id = "title" > 发表主题 </ h1 >

 

< form id = "form1" name = "form1" method = "post" action = "post.php" >

 

< table border = "0" cellspacing = "0" cellpadding = "0" >

 

< tr >

 

< th > 主题 : </ th >

 

< td >< input name = "subject" type = "text" class = "subject" id = "subject" /></ td >

 

</ tr >

 

< tr >

 

< th > 正文 : </ th >

 

< td > <? = $html ?> </ td >

 

</ tr >

 

< tr >

 

< th > &nbsp; </ th >

 

< td >< input name = "submit" type = "submit" id = "submit" value = " 发表主题 " /></ td >

 

</ tr >

 

</ table >

 

</ form >

 

</ div >

 

</ body >

 

</ html >

 

 

运行结果以下：
 

 

 

 

那么，咱们如今的问题是如何获取输入的内容?

咱们刚刚提到过，其实在建立FCKEditor对象时的参数，其实也就是多行文本框的名称，对于有OOP编程经验的人来讲，对于这行代码应该是很清楚的！

 

class FCKeditor

 

{

 

    public function __construct( $instanceName )

 

    {

 

        $this->InstanceName    = $instanceName ;

 

        $this->BasePath        = '/fckeditor/' ;

 

        $this->Width       = '100%' ;

 

        $this->Height      = '200' ;

 

        $this->ToolbarSet  = 'Default' ;

 

        $this->Value       = '' ;

 

 

        $this->Config      = array() ;

 

    }

}

 

 

和

 

 

$Html .= "<textarea name=\"{$this->InstanceName}\" rows=\"4\" cols=\"40\" style=\"width: {$WidthCSS}; height: {$HeightCSS}\">{$HtmlValue}</textarea>";

 

 

而对于没有OOP经验的人来讲，这些东东，咱们会在之后的博文中陆续来介绍！
既然多行文本的名称肯定了，那么一切就能够搞定了！

7. 获取多行文本框的值

$变量名称 = $_POST[“表单元素名称”];

源码以下:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

 

< html xmlns = "http://www.w3.org/1999/xhtml" >

 

< head >

 

< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />

 

< title > 信息确认 </ title >

 

< link href = "style/common.css" rel = "stylesheet" type = "text/css" media = "all" />

 

</ head >

 

< body >

 

< div id = "container" >

 

< h1 id = "title" > 信息确认 </ h1 >

 

< table border = "0" cellspacing = "0" cellpadding = "0" >

 

< tr >

 

< th > 标题 : </ th >

 

< td > <? = $_POST [ "subject" ] ?> </ td >

 

</ tr >

 

< tr >

 

< th > 正文 : </ th >

 

< td > <? = $_POST [ "content" ] ?> </ td >

 

</ tr >

 

</ table >

 

</ div >

 

</ body >

 

</html>

 

运行效果以下：