21-PHP环境下的FCKEditor编辑器的配置
今天有朋友问PHP环境下的FCKEditor编辑器的配置问题,那么我们今天就来看一下下吧!
在我们使用PHP开发WEB项目的时候,经常会使用多行文本框来收集信息,如新闻系统的新闻正文、论坛的帖子正文等。而且我们经常需要对多行文本框的内容进行修饰(如字体、字号等),如果我们通过JS来实现的话,其操作过程是非常繁琐的。现在比较常用的是FCKEditor编辑器来实现,通过这个编辑器我们可以轻松的控制内容的样式。现在,我们就来看看在PHP下如何来配置FCKEditor编辑器。
1. 下载FCKEditor编辑器
在众多的版本中,我们选择2.6.5版即可。
2. 将下载的文件解压到主目录,解压后的效果如下(图一、二所示)
![](https://i-blog.csdnimg.cn/blog_migrate/99cb7b59c67e76dd1a92c23d780b8be0.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/73a48bf2e4b6e19e240dcd3017285138.jpeg)
3. 将解压后的文件保留editor文件夹、fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php、fckpackager.xml、fckstyles.xml、fcktemplates.xml后,删除其他文件。(如下图)
![](https://i-blog.csdnimg.cn/blog_migrate/7ec0517f092971535c5e770a6849402d.jpeg)
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
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
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
>
</
th
>
<
td
><
input
name
=
"submit"
type
=
"submit"
id
=
"submit"
value
=
"
发表主题
"
/></
td
>
</
tr
>
</
table
>
</
form
>
</
div
>
</
body
>
</
html
>
运行结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ec06a2390ab028c138715677d0c45609.jpeg)
那么,我们现在的问题是如何获取输入的内容?
我们刚刚提到过,其实在创建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
>
运行效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1da9aae008ad7a87e5d617f5db830c07.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/37340847eb2b513cafeb05e8564976bb.jpeg)
转载于:https://blog.51cto.com/pangdou/247671