FCKeditor + SyntaxHighlighter 让代码高亮着色

FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,可以最小化修改您的程序实现效果,最终效果截图:

演示网页:http://tech.cncms.com/web/qita/103517.html

下载FCKeditor + SyntaxHighlighter插件包:fck_SyntaxHighlighter.zip

下面分步介绍如何在FCKeditor环境中使用SyntaxHighlighter。 Continue reading

fckeditor的Error creating folder "" (Can't create directory)错误的解决办法

今天使用了fckeditor的编辑器,在下面的环境里测试着没有一点问题的,但上传到服务器上,总是提示

Error creating folder "" (Can't create directory)

这个错误.经测试发现是 apache_lookup_uri 函数出的问题,经测试需要获得物理路径,无奈只能修改为 $_SERVER函数

打开文件,fckeditor\editor\filemanager\connectors\php\io.php

修改为

if ( function_exists( 'apache_lookup_uri' ) )
{
/*zongzong 修改
$info = apache_lookup_uri( $path ) ;
return $info->filename . $info->path_info ;
*/
return $_SERVER['DOCUMENT_ROOT'].$path;
}

即可.

apache_lookup_uri 函数参考:http://docs.haohtml.com/php_manual_zh_html/function.apache-lookup-uri.html

PHP下FCKeditor上传文件时自动目录和重命名及中文文件名解决方案

修改两个文件:

自动化目录:

1、FCKeditor\editor\filemanager\browser\default\connectors\php\config.php

$Config['UserFilesPath']='xxx'改为下

$Config['UserFilesPath'] = '/custom/image/upload/'.date('Y/m/d',time());

重命名:
2、FCKeditor\editor\filemanager\browser\default\connectors\php\commands.php

// 在下列代码之后:
// Get the extension.
$sExtension = substr( $sFileName, (strrpos($sFileName, '.') + 1 ) ) ;

$sExtension = strtolower( $sExtension );

//添加如下语句,则会让所有上传的文件名以“时间+随机数”来重命名。
//Rename filename
$sFileName=date("Ymd_His_").rand(100,200).".".$sExtension;

FCKeditor2.6.5及后续版本配置及中文上传乱码解决(PHP)

fckedior_3.1
1、首先去官网下载FCKeditor2.6.5 多国语言版。http://ckeditor.com/download,注意: 第一个为最新3.0.1版,第二个才是FCKeditor 2.6.5

2、删除不必要的东西:

删除/FCKeditor/目录下除 fckconfig.js,fckeditor.js,fckstyles.xml,fcktemplates.xml,fckeditor.php,fckeditor_php5.php,fckeditor_php4.php
七个文件以外的所有文件;
删除目录/editor/_source(基本上,所有_开头的文件夹或文件都是可选的);
删除/editor/filemanager/connectors/下除了php目录的所有目录;
删除/editor/lang/下的除了 en.js, zh.js, zh-cn.js三个文件的所有文件。 Continue reading

FCKEditor添加中文字体(转)

默认情况下,FCKEditor在进行文本编辑时,无法使用中文字体。
打开 fckconfig.js 文件

找到第154行(应该是),会发现:
程序代码:

FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
将其修改为:

FCKConfig.FontNames = '宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

这样还是不行,虽然发现编辑器的字体选项多了已添加的中文字体,但应用到文本上却发现没有任何作用!
接着下一步 :

打开editor/css/fck_editorarea.css 文件

将程序代码:

font-family: Arial, Verdana, sans-serif;

修改为:

font-family: 宋体, 黑体, 幼圆, 楷体, 仿宋, Arial, Verdana, sans-serif;

注意:一定要“另保存”为 UTF-8编码格式的文档,否则会出现乱码!

javascript 获取FCKeditor内容

形式如:
复制代码 代码如下:
varoEditor=FCKeditorAPI.GetInstance('content');
varcontent=oEditor.GetXHTML(true);

*************************************************
利用Javascript取和设FCKeditor值也是非常容易的,如下:
复制代码 代码如下:
// 获取编辑器中HTML内容
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.GetXHTML(true));
}
// 获取编辑器中文字内容
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return(oEditor.EditorDocument.body.innerText);
}
// 设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
oEditor.SetHTML(ContentStr) ;
}

FCKeditorAPI是FCKeditor加载后注册的一个全局对象,利用它我们就可以完成对编辑器的各种操作。
在当前页获得 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
使用方法如下:
oEditor.Commands.GetCommand('FitWindow').Execute();
= FCKConfig.BasePath + 'plugins/'
// FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;
去 掉//后,就相当于把placeholder这个插件功能加上了,fckeditor的插件文件都在/editor/plugins/文 件夹下分类按文件夹放置的,对于fckeditor2.0来说,里面有两个文件夹,也就是有两个官方插件,placeholder这个文件夹就是我们刚才 加上去的,主要用于多参数或单参数自定义标签的匹配,这个在制作编辑模板时非常管用,要想看具体实例的话,大家可以去下载acms 这个系统查看学习,另一个文件夹tablecommands就是编辑器里的表格编辑用到的了。当然,如果你想制作自己其它用途的插件,那就只要按照 fckeidtor插件的制作规则制作完放置在/editor/plugins/下就行,然后再在fckeidtor.js里再添加 FCKConfig.Plugins.Add('Plugin Name',',lang,lang');就可以了。
第二部分 ,如何让编辑器一打开的时候,编辑工具条不出现,等点“展开工具栏”时才出现?Easy,FCKeditor本身提供了这个功能啦,打开fckconfig.js,找到
FCKConfig.ToolbarStartExpanded = true ;
改成
FCKConfig.ToolbarStartExpanded = false ;
就可以啦!
第三部分,使用自己的表情图标,同样打开fckcofnig.js到最底部那一段
复制代码 代码如下:
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 240 ;

上面这段已经是我修改过的了,为了我发表此文的版面不会被撑得太开,我把FCKConfig.SmileyImages那一行改得只有三个表情图了。
第一行,当然是表情图标路径的设置,第二行是相关表情图标文件名的一个List,第三行是指弹出的表情添加窗口最每行的表情数,下面两个参数是弹出的模态窗口的宽和高喽。
第四部分,文件上传管理部分
此部分可能是大家最为关心的,上一篇文章简单的讲了如何修改来上传文件以及使用fckeidtor2.0才提供的快速上传功能。再我们继续再深层次的讲解上传功能
FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;在fckconfig.js找到这三句,这三句不是连着的哦,只是我把他们集中到这儿来了,设置为true的意思就是允许使用fckeditor来浏览 服务器端的文件图像以及flash等,这个功能是你插入图片时弹出的窗口上那个“浏览服务器”按钮可以体现出来,如果你的编辑器只用来自己用或是只在后台 管理用,这个功能无疑很好用,因为他让你很直观地对服务器的文件进行上传操作。但是如果你的系统要面向前台用户或是像blog这样的系统要用的话,这个安 全隐患可就大了哦。于是我们把其一律设置为false;如下
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;
这样一来,我们就只有快速上传可用了啊,好!接下来就来修改,同样以asp为范例进行,进入/editor/filemanager/upload/asp/打开config.asp,修改
ConfigUserFilesPath = "/UserFiles/"这个设置是上传文件的总目录,我这里就不动了,你想改自己改了
好,再打开此目录下的upload.asp文件,找到下面这一段
复制代码 代码如下:
Dim resourceType
If ( Request.QueryString("Type") <> "" ) Then
resourceType = Request.QueryString("Type")
Else
resourceType = "File"
End If

然后再在其后面添加
ConfigUserFilesPath = ConfigUserFilesPath & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"
这样的话,上传的文件就进入“/userfiles/文件类型(如image或file或flash)/年/月/”这样的文件夹下了,这个设置对单用户来用已经足够了,如果你想给多用户系统用,那就这样来改
ConfigUserFilesPath = ConfigUserFilesPath & Session("username") & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"
这样上传的文件就进入“/userfiles/用户目录/文件类型/年/月/”下了,当然如果你不想这么安排也可以修改成别的,比如说用户目录再深一层等,这里的Session("username")请根据自己的需要进行修改或换掉。
上传的目录设置完了,但是上传程序还不会自己创建这些文件夹,如果不存在的话,上传不会成功的,那么我们就得根据上面的上传路径的要求进行递归来生成目录了。
找到这一段
复制代码 代码如下:
Dim sServerDir
sServerDir = Server.MapPath( ConfigUserFilesPath )
If ( Right( sServerDir, 1 ) <> "\" ) Then
sServerDir = sServerDir & "\"
End If

把它下面的这两行
Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
用下面这一段代码来替换
复制代码 代码如下:
dim arrPath,strTmpPath,intRow
strTmpPath = ""
arrPath = Split(sServerDir, "\")
Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
for intRow = 0 to Ubound(arrPath)
strTmpPath = strTmpPath & arrPath(intRow) & "\"
if oFSO.folderExists(strTmpPath)=false then
oFSO.CreateFolder(strTmpPath)
end if
next

用这段代码就可以生成你想要的文件夹了,在上传的时候自动生成。
好 了,上传文件的修改到现在可以暂时告一段落了,但是,对于中文用户还存在这么个问题,就是fckeditor的文件上传默认是不改名的,同时还不 支持中文文件名,这样一来是上传的文件会变成“.jpg”这样的无法读的文件,再就是会有重名文件,当然重名这点倒没什么,因为fckeditor会自动 改名,会在文件名后加(1)这样来进行标识。但是,我们通常的习惯是让程序自动生成不重复的文件名
在刚才那一段代码的下面紧接着就是
' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name
看清楚了,这个就是文件名啦,我们来把它改掉,当然得有个生成文件名的函数才行,改成下面这样
复制代码 代码如下:
'//取得一个不重复的序号
Public Function GetNewID()
dim ranNum
dim dtNow
randomize
dtNow=Now()
ranNum=int(90000*rnd)+10000
GetNewID=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function
' Get the uploaded file name.
sFileName = GetNewID() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)

这样一来,上传的文件就自动改名生成如20050802122536365.jpg这样的文件名了,是由年月日时分秒以及三位随机数组成的文件名了
详细出处参考:http://www.jb51.net/article/20867.htm

jQuery+PHP实现FCKEditor内容分页

如题,用jQuery+PHP实现FCKEditor内容分页,如下:

PHP分页函数:
/***********FCKEditor分页处理*********/
function pageBreak($content)
{
//把文章内容按照<div style="page-break-after: always"><span style="display: none">&nbsp;</span></div>分割成数组
$content  = $content;
$pattern  = "/<div style=\"page-break-after: always\"><span style=\"display: none\">&nbsp;<\/span><\/div>/";
$strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); //将文章内容分割成数组
$count    = count($strSplit);   //分割后的数组单元数目
$outStr   = ""; //返回的字串
$i        = 1;

if ($count > 1 ) {
$outStr   = "<div id='page_break'>";
foreach($strSplit as $value) {
if ($i <= 1) {
$outStr .= "<div id='page_$i'>$value</div>";
} else {
$outStr .= "<div id='page_$i' class='collapse'>$value</div>";
}
$i++;
}

$outStr .= "<div class='num'>";
for ($i = 1; $i <= $count; $i++) {
$outStr .= "<li>$i</li>";
}
$outStr .= "</div></div>";
return $outStr;
} else {
return $content;
}
}

jQuery代码:
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#page_break .num li:first').addClass('on');

$('#page_break .num li').click(function(){
//隐藏所有页内容
$("#page_break div[id^='page_']").hide();

//显示当前页内容。
if ($(this).hasClass('on')) {
$('#page_break #page_' + $(this).text()).show();
} else {
$('#page_break .num li').removeClass('on');
$(this).addClass('on');
$('#page_break #page_' + $(this).text()).fadeIn('normal');
}
});
});
//-->
</script>

CSS样式代码:
/*文章分页*/
#page_break {

}
#page_break .collapse {
display: none;
}
#page_break .num {
padding: 10px 0;
text-align: center;
}
#page_break .num li{
display: inline;
margin: 0 2px;
padding: 3px 5px;
border: 1px solid #FF7300;
background-color: #fff;

color: #FF7300;
text-align: center;
cursor: pointer;
font-family: Arial;
font-size: 12px;
overflow: hidden;
}
#page_break .num li.on{
background-color: #FF7300;

color: #fff;
font-weight: bold;
}

FCKeditor编辑器配置参数

修改FCKeditor/fckconfig.js中的配置:
所有js配置文件最好保存成UTF-8格式,源代码要读取其中数据,
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容:

FCKConfig.LinkBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL=FCKConfig.BasePath+"filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=File' ;

FCKConfig.FlashUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Flash' ;

FCKConfig.ImageUploadURL=FCKConfig.BasePath+'filemanager/upload/simpleuploader?Type=Image' ;

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ;
即在编辑器域内可以使用Tab键。

如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,
在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,
也就是基本的toolbar,找到:
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
这是改过的Basic,把图像功能去掉,把添加链接功能去掉,因为图像和链接和flash和图像按钮添加功能都能让前台
页直接访问和上传文件, fckeditor还支持编辑域内的鼠标右键功能。

FCKConfig.ContextMenu= ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField', /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

这也是改过的把鼠标右键的“链接、图像,FLASH,图像按钮”功能都去掉。

找到: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上几种我们常用的字体
FCKConfig.FontNames
= '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

以下是该文件的具体属性列表:
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.EditorAreaStyles = '' ; // 编辑区的样式表风格
FCKConfig.ToolbarComboPreviewCSS =''; //工具栏预览CSS
FCKConfig.DocType = '' ;//文档类型
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.FullPage = false ; //是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
FCKConfig.StartupShowBlocks = false ;//决定是否启用"显示模块"
FCKConfig.Debug = false ;//是否开启调试功能
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮肤路径
FCKConfig.PreloadImages=... //预装入的图片
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路径
FCKConfig.AutoDetectLanguage = true ; //是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; //默认语言
FCKConfig.ContentLangDirection = 'ltr' ; //默认的文字方向,可选"ltr/rtl",即从左到右或从右到左
FCKConfig.ProcessHTMLEntities = true ; //处理HTML实体
FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
FCKConfig.IncludeGreekEntities = true ;//包括希腊文
FCKConfig.ProcessNumericEntities = false ;//处理数字实体
FCKConfig.AdditionalNumericEntities = '' ; //附加的数字实体
FCKConfig.FillEmptyBlocks = true ; //是否填充空块
FCKConfig.FormatSource = true ; //在切换到代码视图时是否自动格式化代码
FCKConfig.FormatOutput = true ; //当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ' ' ; //当在源码格式下缩进代码使用的字符
FCKConfig.StartupFocus = false ; //开启时焦点是否到编辑器,即打开页面时光标是否停留在fckeditor上
FCKConfig.ForcePasteAsPlainText = false ; //是否强制粘贴为纯文件内容
FCKConfig.AutoDetectPasteFromWord = true ; //是否自动探测从word粘贴文件,仅支持IE
FCKConfig.ShowDropDialog = true ;//是否显示下拉菜单
FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0 ;//按下Tab键时光标跳格数,默认值为零为不跳格
FCKConfig.ShowBorders = true ;//合并边框
FCKConfig.SourcePopup = false ;//弹出
FCKConfig.ToolbarStartExpanded = true ;//启动fckeditor工具栏默认是否展开
FCKConfig.ToolbarCanCollapse = true ;//是否允许折叠或展开工具栏
FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
FCKConfig.FloatingPanelsZIndex = 10000 ;//浮动面板索引
FCKConfig.HtmlEncodeOutput = false ;//是否将HTML编码输出
FCKConfig.TemplateReplaceAll = true ;//是否替换所有模板
FCKConfig.ToolbarLocation = 'In' ;//工具栏位置,
FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.Debug = true/false; // 是否开启调试功能,当调用FCKDebug.Output()时,会在调试窗中输出内容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向,ltr左,rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能,可以将空的块级元素用空格来替代
FCKConfig.FormatSource = true/false; // 切换到代码视图时,是否自动格式化代码
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B,I,U标记
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
FCKConfig.ShowBorders = true/false; // 是否合并边框
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时,工具栏是否展开,点“展开工具栏”时才出现
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车,在代码中生成,可选为p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车,在代码中生成,可选为p | div | br
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
FCKConfig.FontColors = ""; // 文字颜色列表
FCKConfig.FontNames = ""; // 字体列表
FCKConfig.FontSizes = ""; // 字号列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
FCKConfig.SmileyImages = ''; // 表情文件名称列表,具体参考默认设置
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容

上传设置
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php</pre></font><hr></blockquote>
//第一个是文件浏览器使用的语言,第二个快速上传使用的语言,改成你需要的,JSP项目这里就不要改了
FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
//这是两个允许和拒绝上传的文件类型列表
FCKConfig.ImageBrowser = false ;//是否在插入图片功能里面启用服务器文件浏览功能
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
//Type=Image 表示文件类型是image这会使文件浏览器定位到文件上传路径/image/文件夹下面
FCKConfig.FlashBrowser = false ;是否在插入flash功能中启用服务器文件浏览功能
FCKConfig.LinkUpload = false ;是否启用插入链接的快速上传功能
FCKConfig.ImageUpload = false ;是否启用图片快速上传功能
FCKConfig.FlashUpload = false ;是否启用flash上传功能

在二级域名和顶级域名下使FCKeditor编辑器上传图片显示问题

FCKeditor编辑器大家都用的吧,最近一个项目遇到了一些麻烦,就是项目发布前是有二级目录的,比如http://www.abc.com/test/,项目发布以后就需要指向到一级域名,比如:www.test.com,项目在服务器上的物理路径是不变的。相信很多网络公司发布网站都用这种方式。域名指向以后FCK编辑器里面的图片显示就会出现问题。找了很多方法,最后确定,FCKeditor编辑器本身是有设置的!先汗一个。。。。

在Fckeditor目录下找到fckconfig.js文件,在30行左右找到:

FCKConfig.BaseHref = '' ;

这个就是设置图片基础路径的,脚本调用这个变量的时候会生成一个html<Base>标签

document.write( '<base href="' + window.parent.FCKConfig.BaseHref + '">' ) ;

Base标签的作用,相信很多人很陌生,没怎么用过。我查了一下资料<Base>的作用简单的说就是,不管本页面在哪个目录下面,只要设置了<base>那么,图片路径就当时设置的这个目录下面,不过设置要用绝对路径,不能用相对路径。比如:http://www.baidu.com/

<head>
<base href="http://www.w3schools.com/images/" />
</head>
<img src="smile.gif" />

相当于

<head>
</head>
<img src="http://www.w3schools.com/images/smile.gif" />

了解了这些以后就简单了,FCKConfig.BaseHref = '' ;虽然可以设置,但是需要绝对路径,所以加入下面的小代码就可以了:
原理很简单,就是取top的location就可以了,然后把最后面的文件名删除就可以了。

另外,上传文件的路径设置成:

$Config['UserFilesPath'= '../upload/fck/' ;

$Config['UserFilesAbsolutePath'= '/web1/web/xuxu/upload/fck/' ;

上传设置文件的路径位于:FCKeditor\editor\filemanager\upload\php\config.php
浏览设置文件的路径位于:FCKeditor\editor\filemanager\browser\default\connectors\php\config.php

 

FCKConfig.BaseHref = '' ;

if(top.location!=null)
{
    
var __url=top.location+"";
    __url
=__url.substr(0,__url.lastIndexOf("/")+1);
    FCKConfig.BaseHref
=__url;
}

http://blog.csdn.net/cui55/archive/2007/09/07/1775985.aspx

FCKEditor——添加自定义工具栏

   FCKEditor是一个功能强大的开源在线编辑器,所以是非常适合我等兜兜无啥银子的人拿来“把玩”的~~~呵呵。一个产品即使功能再强大也不能满足所有用户的需求,当然FCKEditor也不例外咯。就拿我现在所开发的一个系统(工作流)来说,就遇到了FCKEditor不能满足我的要求的情况。因为我想在工具栏中加入自己的操作控制按钮,配置当然搞不定咯,就只有改源代码了。可一看FCKEditor经过处理后的JS源码,头立刻就大了——无换行无注释,一大堆JS代码堆在那里,想看懂几乎没门。当然它这样做也是有好处的,要不这大的一个东西加载怎么会那么快呢。看不懂处理后的JS源码,我们可以看有格式的源码嘛,所以就上网down了一个2.4的FCKEditor。好了,现在就让我们开始怎么一步一步的加入我们自己的操作菜单到工具栏中去。

    比如我想加一个我自己的输入框用来控制日期的输入,即该输入框只能通过选择来选择日期,这个我们结合日期控件my97来做,呵呵,充分利用已有的成果。有人会说,我直接改它的对话框不就得了,当然这也是可以的,可我们今天要做的就是如何加入自己的工具栏操作,这样以后就可以依次类推,加入任何想要加入的操作了:-)。

    首先,我们给这个日期输入框定一个名字,就叫做CTRL_Date吧。第一步嘛,我们就直接在fckconfig.js文件中的Basic工具条集(FCKConfig.ToolbarSets["Basic"])中加入这个名称,加进去很简单吧,呵,不多说了。然后呢,也得给它弄个中文名称什么的吧,直接打开语言文件zh-cn.js,英文的就不管了哈,加入:CTRL_Date : "日期控件"。另外还得加一个上下文语言提示菜单,这样在编辑区域内就可以通过右键选择属性来进行编辑操作了。也是在zh-ch.js中加入:CTRLDateProp : "日期控件属性"。到这里,又要回到fckconfig.js文件中了,我们在FCKConfig.ContextMenu中加入CTRL_Date,这样才能使其拥有上下文菜单嘛。到这里,基础工作就做完了,呵呵,然后就是艰巨的源码改造工程了,当然了也不要怕咯,一步一步来就没问题了~~@_@

    我们解压下载的FCKEditor2.4,然后找到fckregexlib.js文件,找到其中的NamedCommands,然后把CTRL_Date加到最后,然后再修改fckeditor处理后的最终JS文件fckeditorcode_ie.js(只改IE的,至于FF就不管了,对不起它了,嘿)。网上说可以用一个什么程序来进行源码打包的,可我在下的压缩包里没看到呢,所以就只有手动修改这个最终的文件了。在该文件中找到NamedCommands这一位置然后在最后加入CTRL_Date,这样就注册了一个命令CTRL_Date了。然后再找到源代码文件夹中的fckcommands.js文件,是不是看到很多case啊,呵,这就是工具栏中每个操作的命令了。我们依葫芦画瓢,在最后加上:case 'CTRL_Date':oCommand=new FCKDialogCommand('CTRL_Date',FCKLang.CTRL_Date,'dialog/workflow/fck_ctrl_date.html',380,230);break ;这个意思就是说,当你单击工具栏上的日期控件的时候就会以模式对话框打开dialog/workflow/fck_ctrl_date.html这个网页文件,至于是什么内容,我们待会再说。这样写好后,我们就可以加入到fckeditorcode_ie.js文件中了。我们在fckeditorcode_ie.js文件中找到new FCKUndefinedCommand()这个位置,然后在它之后的break;之后加上我们刚才写的代码(注意把oCommand改为B后再加入,因为我的最终处理源码中是B,估计这样简写也是为了减少源码的大小吧)。这两个步骤完成后,我们就可以在工具栏中单击日期控件时打开我们自己定义的日期控件属性编辑的网页文件了。

    然后还一工程就是增加该控件的上下文菜单,要不然在编辑区域右键选择时就会弹出输入框的属性和对话框了,这可不是我们想要的结果呢。我们还是先在源码中修改,然后再复制到最终处理的源码文件中去。找到文件fcktoolbaritems.js,也有很多case哦,看名字就知道这是设置工具栏中的按钮项了。同样,我们在最后加入:case 'CTRL_Date' : oItem=new FCKToolbarButton('CTRL_Date',FCKLang.CTRL_Date,null,null,null,null,51);break;注意其中的55表示的是该操作按钮的图标索引(这个索引指的是skins目录下的fck_strip.gif文件中图标的顺序索引),我们使用和输入框一样的图标就是51了。同样,我们在最终文件fckeditorcode_ie.js中查找字符串alert(FCKLang.UnknownToolbarItem.replace(/%1/g(注意把空格去掉),然后在它之前的default之前加入我们刚写的语句(同样把oItem改成B)。这是完成上下文菜单的第一步,还有第二步也就是最后一步了,胜利就在眼前哦,加油了,呵呵。

    接着就是文件fck_contextmenu.js的修改了。一样也是很多case,我们加入如下语句
case 'CTRL_Date':return{AddItems:function(A,B,C){if(C=='INPUT'&&B.type=='text'&&B.className=='_wf_date'){A.AddSeparator();A.AddItem('CTRL_Input',FCKLang.CTRLDateProp,51);}}};(注意这里的A,B,C就是源码中menu,tag,tagName,这里直接写成A,B,C是为了直接插入到最终代码中去而已)。注意到上面中不是有个B.className=='_wf_date'么?这是因为FCKEditor中已经自带了input输入框的控制,所以这里我们用一个样式名称来区别它自带的还是我们自加的。当然这个样式名称可以随便取的,而且在fck_ctrl_date.html这个网页文件(我们自己写的来编辑日期控件的属性文件)中需要给日期控件也就是input输入框加上className="_wf_date"属性以示区别原有的input输入框。当然,我们还要修改原来的input的case,在fckeditorcode_ie.js文件中找到字符串case 'TextField':return {AddItems所在的位置(如果找不到请去掉或增加空格),然后修改if中的条件,加一个&&B.className!='_wf_date'。最后就把我们写的上面的代码加到TextField这个case之后就可以了。这样修改后就会使当右键单击某个元素时,如果是输入框并且样式名称不是我们指定的日期控件则会调用它自带的输入框属性编辑网页,如果样式名称是我们自己定义的日期控件的名称则会调用我们自己编辑的属性网页,这样就达到了同是输入框在查看属性时分别调用不同属性编辑网页的目的了。

    好了,完成上面的所有步骤后就可以保存修改后的fckeditorcode_ie.js文件了。这里还有一点工作要做哦,就是在dialog目录下新建一个目录workflow,然后在它下新建一个日期控件属性输入的网页文件fck_ctrl_date.html。具体的内容我们可以直接copy FCKEditor自带的fck_textfield.html网页文件的内容过来,然后简单的修改下就可以了,但重要的是别忘了在ok函数中给你的日期控件加上className="_wf_date"属性哦,否则右键属性查看时则会调用FCKEditor自带的文本框输入的编辑网页了。

    经过这么多步骤,已经全部完工了。赶快打开你的在线编辑器看看吧~~~~