[转]FCKeditor
今天我使用了一个FCKeditor感觉二个字强大!下面是二篇还不错的文章希望对你有所帮助在文章中我加了适量的注释,请大家要注意了!
______________________________________________________________________________
FCKeditor2.3.2在线编辑器非常好用,完全支持文件上传。今天baidu了一直午终于搞定了。 下载FCKeditor2.3.2,解压至FCKeditor。
一:首先删除不必要的文件节省空间。凡是以_开头的文件如_samples,_testcases和一些用不到的.asp、.jsp、.cfm文件统统干掉。
FCKConfig.DefaultLanguage = 'zh-cn' ;//设置语言
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;//设置皮肤
FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现,等点“展开工具栏”时才出现
设置默认字体及大小
body, td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 14px;
}
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php
修改fckeditor\editor\filemanager\browser\default\connectors\php
$Config['UserFilesPath'] = '/UserFiles/' ;//设置上传的文件夹,可自己指定
$Config['UseFileType'] = true ;
$Config['UserFilesPath'] = '/UserFiles/' ;//同上要一样
include("fckeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;//实例化
$oFCKeditor->BasePath = 'fckeditor/';//这个路径一定要和上面那个引入路径一致,否则会报错:找不到fckeditor.html页面
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '300' ;
$oFCKeditor->Create() ;//可以用$oFCKeditor->CreateHtml()
?>
FCKeditor的详细配置说明:
FCKeditor 2.0的主要配置文件为FCKeditor\fckconfig.js,其中几个重要的配置项目如下:
一.改变配置文件:
$oFCKeditor->Config['CustomConfigurationsPath'] = '/myconfig.js' ;
使用这行代码,可以将配置文件放置于FCKeditor目录之外
注意原来的配置文件fckconfig.js不可删除,必须仍然放置于FCKeidtor目录下。另外,改变配置之后,要清除浏览器的缓存,否则不会看到最新的页面。如果你使用的是IE,可以按Ctrl+F5强制刷新。
二. 工具栏的配置
默认情况下,FCKeditor会调用默认的工具栏按钮,FCKConfig.ToolbarSets["Default"]这个数组的每个元素对应一个工具,大家可以根据自己的需要进行增减。
三. 文字样式设置(Style)
FCKeditor所预设的样式有Image on right,Image on Left,Title,Code等等,如果你有自己常用到的特殊的格式,你可以自己来添加。需要修改的文件有:
fckconfig.js
FCKConfig.FontFormats =
editor/_source/classes/fcktoolbarfontformatcombo.js
var ōNames =
editor/js/fckeditorcode_ie_2.js and /editor/js/fckeditorcode_gecko_2.js
var ōNames=
editor/lang/下你选择的语言文件
FontFormats
Styles的配置文件是个XML文件,即fckstyles.xml,当然你也可以自己新建一个XML文件并指定配置文件为自己的XML文件。
在配置的js中,修改FCKConfig.StylesXmlPath = '../myfckstyles.xml' ;
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
四. 配置模板
模板配置可以参考fcktemplates.xml,自己定义,然后设置为默认的模板配置文件:
FCKConfig.TemplatesXmlPath = '/mytemplates.xml' ;
转自:http://www.phpchina.com/13636/viewspace_5975.html
以下是另一篇:主要是上一篇中没有提到的配置 FCKeditor的toolbar功能按钮
最近用php+mysql开发一个项目,里面用到了FCKeditor,下面对这个用法进行一下小结.首先说明一下我的FCKeditor版本是2.1多国语言版.
用法:1.我的网站目录是www.里面有如下文件夹和文件
\www
add.php
\include
\FCKeditor
2.调用FCKeditor的方法:
(1)在开头包含include("FCKeditor/fckeditor.php")
(2)在需要使用的的方加入
(此处basepath的路径一定要和上面include的路径一样.否则会找不到文件)
另外,对于这个输入内容的变量,如果要把它存入数据库,它的变量名为你建
立对象的名字.例如上面就是FCKeditor1
<?php
//大家要注意了,下面红色的那个斜杠一定要加上哦,要不程序就会无法显示编码器一开始我就上了那当,搞了半天没反应!
$oFCKeditor = new FCKeditor('FCKeditor1') ;//建立对象
$oFCKeditor->BasePath = 'FCKeditor/' ;//FCKeditor所在的位置
$oFCKeditor->ToolbarSet = 'Default' ;//工具按钮
$oFCKeditor->Create('EditorDefault', '60%',150) ;
?>
3.在FCKeditor\_samples\里面有个php调用的例子.如simples01.php
和sampleposteddata.php这两个.后面那个文件是输出变量名的php
程序,通过这个程序可以得到文本输入框内容的变量名.
4.配置 FCKeditor的toolbar功能按钮可以很容易地进行定制,你可以依据你
的需要在FCKeditor的配置文件FCKeditor\fck_config.js中进行定制
,一个功能按钮对应一个唯一的名称。
在fck_config.js中默认情况下已经设定好三种toolbar样式:Default(包
含全部功能),Accessibility和Basic。
让我们先来看看toolbar样式的定制格式:
config.ToolbarSets["ToolBarSetName"] = [ // Toolbar名
['Item 1','Item 2','-','Item 3','Item n'], // Toolbar第一行
['Item 4','-','Item 5','Item 6','Item n'] // Toolbar第二行
] ;
这里'-'的作用是创建一个分割条。
FCKeditor1.6为我们提供了60个编辑功能,具体功能如下:
//有可能是版本问题,下面有些不使用时,去弹出js的警告对话框说工具不存在! 默认的Default包含了FCKeditor的全部功能,个人感觉有些功能用不上,完全加载还会影响显示速度,所以我简化了一下,只加载了一些常用的功能:
1、打开FCKeditor\fck_config.js文件,添加如下代码
功能名称 | 含义 | 功能名称 | 含义 |
EditSource | 显示HTML源代码 | StrikeThrough | 删除线 |
Save | 保存 | Subscrīpt | 下标 |
NewPage | 新建空白页面 | Superscrīpt | 上标 |
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 | 背景色 |
config.ToolbarSets["www"] = [
['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'] ] ;
因为版权的原因,工具的名字有可能发生改变:
FCKeditor_2.4.3的设置:
FCKConfig.ToolbarSets["www"] = [
['Source','Save','NewPage','Preview','-','Cut','Copy','Paste','PasteText','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','Unlink','-','Image','Table','Rule','SpecialChar','Smiley'] ,
['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','OrderedList','UnorderedList','-','Form','Checkbox','Radio','TextField','Textarea','Select','Button','-','Style','TextColor']
] ;
这样加载的速度就快多了。
使用时只需把$oFCKeditor->ToolbarSet = 'Default'
改为$oFCKeditor->ToolbarSet = 'www' 即可
最后.我们把FCKeditor目录下所有以下划线“_”开头的目录都删掉以节省空间,如_test._samples,等等.完工