需要修改的文件:
- fckconfig.js
- zh-cn.js
- fckeditorcode_gecko.js || fckeditorcode_ie.js(这里针对gecko的浏览器,ie的相同)
Step 1:在Toolbar中添加功能按钮
fckconfig.js:FCKConfig.ToolbarSets[“Basic”] 中添加按钮名称
- FCKConfig.ToolbarSets["Basic"] = [
- ['Bold','Italic','-','About', 'Test']
- ] ;
Step 2:为按钮添加中文名称
zh-cn.js:为你的按钮起个名字
- DlgAboutInfo : "要获得更多信息请访问 ",
- Test : "测试"
Step 3:在Toolbar中显示该按钮
fckeditorcode_gecko.js:(这个JS的代码经过压缩,可以使用工具格式化再进行修改)
查找:
- case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
在break后插入你的代码
- case 'Test':B=new FCKToolbarButton('Test',FCKLang.Test,null,null,true,null,50);break;
这样就可以在Toolbar中显示你的按钮了
Step 4:定义按钮功能原型
ckeditorcode_gecko.js:
查找:
- var FCKNewPageCommand=function(){this.Name='NewPage';};
- FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
- FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
定义功能原型:(这里直接复NewPage的实现代码,可修改成自已的)
- var FCKTestCommand=function(){this.Name='NewPage';};
- FCKTestCommand.prototype.Execute=function(){function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
- FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
将上面代码搜入到查找内容之后。
Step 5:按钮功能实例化:
ckeditorcode_gecko.js:
查找:
- case 'NewPage':B=new FCKNewPageCommand();break;
功能实例化:
- case 'Test':B=new FCKTestCommand();break;
将上面代码搜入到查找内容之后。
OK,这样就可以在为FCKeditor加上自定义的按钮了。
http://itblog.org/read.php?id=103 这是原文,我就是看着这个做出来的 感谢作者
但过程中遇到些问题 下面对这篇文章做了一些小的解释 希望对象我这样的菜鸟有所帮助
增加按钮有以下几步:
1、为按钮增加图片:
FCK的所有按钮图片是存放在一个图片文件 里的,这一点比较独特,文件存放在相应皮肤目录下,如:/FCK/skins/silever/fck_strip.gif。通过Fireworks或 Phtoshop打开该文件可以发现一个很长的图片,里面包含所有按钮的图片,现在您可以在该图片的最下面增加您自定义的按钮,注意,每个按钮的尺寸是 16*16px。
2、为按钮增加功能代码
增 加按钮需要对FCK/editor/js目录中的两个核心文件进行修改:fckeditorcode_gecko.js和 fckeditorcode_ie.js,前者是使用于gecko核心的浏览器如Firefox等,而后者应用于以IE为核心的浏览器如MyIE(傲游) 等,这两个文件大体是相似的,仅有微小差别,在此我们基本无须担心。
修改的方法非常简单,基本是一个照葫芦画瓢 的过程,首先我们找一个与我们将要添加的按钮功能相似的一个按钮,这里我们选择了Newpage,这是一个清空编辑器以备新建一个文件的按钮。首先我们修 改fckeditorcode_ie.js,fckeditorcode_gecko.js直接复制更改的代码就可以了。
打开 fckeditorcode_ie.js,这里需要说明的是,fckeditorcode_ie.js是多个文件合并经过代码优化的(即去掉了大部分换 行、空格、注释等)不是很容易阅读,而且这样一百多K的JS文件用Dreamweaver、ZDE等工具打开后CPU立刻升至100%,相信计算机就变成 痴呆一样了,经过一翻比较,发现曾被我认为一文不值的Golive竟然可以轻松打开该文件并快速编辑!(!VS也可以)不管你用什么软件反正能打开并编辑就行了。以关键词Newpage进行查找,你会发现一个按钮的功能定义分三大部分:
A、功能原型
// 按钮功能原型
var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
var FCKMyAlbumCommand=function(){this.Name='DISPLAY: none';};
FCKMyAlbumCommand.prototype.Execute=function(){if(typeof(parent.showMyAlbum)=="function"){parent.showMyAlbum(FCK);}else{alert(FCKLang.NoAlbum);}};
FCKMyAlbumCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
(!showMyAlbum应为函数 放在调用编辑器的页面里)
B、功能的实例化
case 'NewPage':B=new FCKNewPageCommand();break;
case 'MyAlbum':B=new FCKMyAlbumCommand();break;
C、按钮的显示
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
case 'MyAlbum':B=new FCKToolbarButton('MyAlbum',FCKLang.MyAlbum,null,null,true,null,67);break;
上面代码中第一部分是Newpage的原代码,后一部分是我们自定义的代码,您一看应该明白怎么回事了吧?仅红色部分和名称不同而已!而红色部分就是我们的自定义功能。
FCKLang是语言包对象,您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了,比如:MyAlbum打开我的像册。注意大小写!至此我们的添加工作已完成。
但是,接着发现有个问题,就是怎么往编辑域内插入HTML代码了,忽然想起FCK自带的API似乎有这个功能,于是就去示例页查找,终于在/FCKeditor/_samples/html/sample08.html找到方法了.用
var oEditor = FCKeditorAPI.GetInstance('content'); if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>----------||----------</p>');}else{alert ('不能在源代码模式下进行该操作!');}
代替
var oEditor = FCKeditorAPI.GetInstance('content'); if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>----------||----------</p>');}else{alert ('不能在源代码模式下进行该操作!');}
这一段
FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;
注意:FCKeditorAPI.GetInstance('content'); 其中content是编辑器的名称
这里可以这样写
function showMyAlbum(oEditor)
{
if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>Success! </p>');}else{alert ('不能在源代码模式下进行该操作!');}
}
这样就可以在页面里自定义编辑器id而不用更改函数
fckconfig.js里面的
FCKConfig.ToolbarSets["Default"] = [
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','Cowboy'] // No comma for the last row.
在这里设置要显示的按钮
(一).添加自定义工具栏
涉及到三组文件:
1.fckeditor/editor/lang下的文件(这是界面多语言支持的文件夹,在此只修改英文和简体中文支持的.js文件)
en.js:
zh-cn.js:
2.fckeditor/editor/js下的文件(这是多浏览器支持的文件夹,FCKEditor 核心代码。为了减少大小,该文件夹的文件已被压缩,未被压缩的文件在"fckeditor/editor/_source"中。
fckeditorcode_gecko.js:提供"类火狐"等浏览器支持。
fckeditorcode_ie.js:提供"类IE"等浏览器支持。
以上文件共要改两处:
(1).在以上文件中查找"default:if (FCKRegexLib",在default 前插入"case 'InsertCode':B = new FCKDialogCommand('InsertCode' ,FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.aspx',700,600);break"
FCKDialogCommand()方法:
参数1,2:按钮名称,跟前面语言支持文件中定义的对应
参数3:点击该按钮后显示的文件
参数4,5:弹出窗口的宽和高
(2).继续查找"default:alert(FCKLang.UnknownToolbarItem",在"default"前插入"case 'InsertCode':B = new FCKToolbarButton('InsertCode', FCKLang.InsertCode,null,null,null,null,69);break;"
最后的参数是工具栏图标的索引(FCKEditor版本不同,索引不同),图标文件fckeditor/editor/skins/office2003/fck_strip.gif,在图片的最后增加一个16*16的图标。索引计算方法是:该图片高度除16即得到最后一个图标索引号。
3.fckeditor/fckconfig.js
(二).制作InsertCode.aspx 文件(fckeditor/editor/dialog/InsertCode/InsertCode.aspx)
<% @ Register TagPrefix = " CH " Namespace = " ActiproSoftware.CodeHighlighter " Assembly = " ActiproSoftware.CodeHighlighter.Net20 " %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< script runat ="server" >
static string code = string.Empty;
protected void btnSubmit_Click(object sender, EventArgs e)
{
code = txtCode.Text;
Highlighter.LanguageKey = ddlLangType.SelectedItem.Text;
Highlighter.OutliningEnabled = chkOutLining.Checked;
Highlighter.LineNumberMarginVisible = chkLineNum.Checked;
Highlighter.Text = code;
}
protected void Page_Load(object sender, EventArgs e)
{
if ( ! IsPostBack)
{
CodeHighlighterConfiguration config = ConfigurationManager.GetSection( " codeHighlighter " ) as CodeHighlighterConfiguration;
string[] keys = new string[config.LanguageConfigs.Keys.Count];
config.LanguageConfigs.Keys.CopyTo(keys, 0 );
Array.Sort(keys);
foreach (string key in keys)
{
ddlLangType.Items.Add(key);
}
ddlLangType.SelectedIndex = ddlLangType.Items.IndexOf(ddlLangType.Items.FindByText( " C# " ));
}
}
protected void Highlighter_PostRender(object sender, EventArgs e)
{
if (Highlighter.Output != null )
{
lblCode.Text = " <pre> " + Highlighter.Output.Replace( " /n " , " <br /> " ) + " </pre> " ; //FCKEditor 2.5 版本以下,在<pre>标记中的换行由设计视图转化为代码视图时有时会失效,因此将换行符换成<br />
//或者换成Highlighter.Output.Replace(" ", " ").Replace("/n", "<br />") 把回车换成<br /> 双空格换成
Response.Write( " < scr " + " ipt > window.parent.SetOkButton( true ); < / scr" + "ipt>"); // 返回成功,显示"确定"按钮
}
}
</ script >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title >插入代码--飘遥的BLOG</ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta content ="noindex, nofollow" name ="robots" />
< script src ="../common/fck_dialog_common.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
var oEditor = window.parent.InnerDialogLoaded() ;
// Gets the document DOM
var oDOM = oEditor.FCK.EditorDocument ;
var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;
window.onload = function ()
{
// window.parent.SetOkButton( true );
}
function Ok()
{
if (GetE( ' txtCode ' ).value == '' )
{
alert( " 代码内容不能为空! " );
return false ;
}
oEditor.FCK.InsertHtml( document.getElementById( " lblCode " ).innerHTML ) ;
return true ;
}
</ script >
< style type ="text/css" >
.langType
{
padding-bottom : 5px ;
}
.btnRun
{
padding-top : 5px ;
text-align : right ;
}
PRE {
background-color : #FFFEF8 ;
border-style : solid ;
border-width : 1px ;
border-color : #C0C0C0 ;
font-family : Courier New, monospace ;
font-size : 10pt ;
}
</ style >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< div class ="langType" >
语言类型: < asp:DropDownList ID ="ddlLangType" runat ="server" >
</ asp:DropDownList ></ div >
< div class ="textCode" >
< asp:TextBox ID ="txtCode" runat ="server" TextMode ="multiline" Width ="665px" Height ="390px" ></ asp:TextBox >
</ div >
< div class ="btnRun" >
< asp:CheckBox ID ="chkOutLining" Text ="折叠代码" runat ="server" Checked ="true" />
< asp:CheckBox ID ="chkLineNum" Text ="允许行号" runat ="server" Checked ="true" />
< asp:Button ID ="btnSubmit" runat ="server" Text =" 转 换 " OnClick ="btnSubmit_Click" />
< pre id ="pre1" style ="display: none;" >
< CH:CodeHighlighter runat ="server" ID ="Highlighter" OnPostRender ="Highlighter_PostRender" /></ pre >
< asp:Label ID ="lblCode" style ="display:none;" runat ="server" ></ asp:Label >
</ div >
</ div >
</ form >
</ body >
</ html >
(三).配置CodeHighlighter组件
可根据CodeHighlighter文档配置,不再多说。
< configuration >
< configSections >
< section name ="codeHighlighter" requirePermission ="false" type ="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20" />
</ configSections >
< appSettings >
< add key ="FCKeditor:UserFilesPath" value ="/Files/" />
</ appSettings >
< system.web >
< pages validateRequest ="false" enableEventValidation ="false" />
< compilation debug ="true" />
</ system.web >
< codeHighlighter >
< cache languageTimeout ="3" />
< keywordLinking enabled ="true" target ="_blank" defaultKeywordCollectionKey ="ActiproKeywords" >
< keywordCollection key ="ActiproKeywords" >
< explicitKeyword tokenKey ="IdentifierToken" patternValue ="Zxjay" url ="http://www.xianfen.net" caseSensitive ="false" />
</ keywordCollection >
</ keywordLinking >
< languages >
< language key ="Assembly" definitionPath ="~/Languages/Lexers/ActiproSoftware.Assembly.xml" />
< language key ="BatchFile" definitionPath ="~/Languages/Lexers/ActiproSoftware.BatchFile.xml" />
< language key ="C#" definitionPath ="~/Languages/Lexers/ActiproSoftware.CSharp.xml" />
< language key ="CSS" definitionPath ="~/Languages/Lexers/ActiproSoftware.CSS.xml" />
< language key ="HTML" definitionPath ="~/Languages/Lexers/ActiproSoftware.HTML.xml" />
< language key ="INIFile" definitionPath ="~/Languages/Lexers/ActiproSoftware.INIFile.xml" />
< language key ="Java" definitionPath ="~/Languages/Lexers/ActiproSoftware.Java.xml" />
< language key ="JScript" definitionPath ="~/Languages/Lexers/ActiproSoftware.JScript.xml" />
< language key ="Lua" definitionPath ="~/Languages/Lexers/ActiproSoftware.Lua.xml" />
< language key ="MSIL" definitionPath ="~/Languages/Lexers/ActiproSoftware.MSIL.xml" />
< language key ="Pascal" definitionPath ="~/Languages/Lexers/ActiproSoftware.Pascal.xml" />
< language key ="Perl" definitionPath ="~/Languages/Lexers/ActiproSoftware.Perl.xml" />
< language key ="PHP" definitionPath ="~/Languages/Lexers/ActiproSoftware.PHP.xml" />
< language key ="PowerShell" definitionPath ="~/Languages/Lexers/ActiproSoftware.PowerShell.xml" />
< language key ="Python" definitionPath ="~/Languages/Lexers/ActiproSoftware.Python.xml" />
< language key ="SQL" definitionPath ="~/Languages/Lexers/ActiproSoftware.SQL.xml" />
< language key ="VB.NET" definitionPath ="~/Languages/Lexers/ActiproSoftware.VBDotNet.xml" />
< language key ="VBScript" definitionPath ="~/Languages/Lexers/ActiproSoftware.VBScript.xml" />
< language key ="XAML" definitionPath ="~/Languages/Lexers/ActiproSoftware.XAML.xml" />
< language key ="XML" definitionPath ="~/Languages/Lexers/ActiproSoftware.XML.xml" />
</ languages >
< lineNumberMargin foreColor ="Teal" paddingCharacter =" " visible ="true" />
< outlining enabled ="true" imagesPath ="~/Images/OutliningIndicators/" />
< spacesInTabs count ="4" />
</ codeHighlighter >
</ configuration >