FCK編輯器(FCKEditor)添加新按鈕和功能的修改方法
更新時間:2010年11月19日 20:59:57 作者:
最近項目需要對已有的FCKeditor添加新的功能,以前的做法只是在外殼處再次封裝,這次無法滿足需求只能進行內(nèi)部修改了。
需要修改的文件:
fckconfig.js
zh-cn.js
en.js
fckeditorcode_gecko.js || fckeditorcode_ie.js(針對IE以外的瀏覽器||針對ie瀏覽器,如果要支持兩種瀏覽器,就這兩個包都修改)
第一步:在Toolbar中添加功能按鈕
fckconfig.js:FCKConfig.ToolbarSets[“Default”] 中添加按鈕名稱
FCKConfig.ToolbarSets["Default"] = [
['Bold','Italic','-','About', 'mydiy']
] ;
第二步:為按鈕添加中文名稱和英文名稱
zh-cn.js:為你的按鈕起個中文名字
mydiy : “我的自定義按鈕"
en.js:為你的按鈕起個英文名字
mydiy:"mydiybutton"
第三步:在Toolbar中顯示該按鈕
fckeditorcode_gecko.js(fckeditorcode_ie.js):
查找:
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
在break后插入你的代碼
比如case 'mydiy':B=new FCKToolbarButton('mydiy',FCKLang.mydiy,null,null,false,true,50);(這個50是按鈕的顯示圖片,要讓你的自定義按鈕顯示為插入圖片那個按鈕的圖片,可以填入37)
這樣就可以在Toolbar中顯示你的按鈕了
第四步:定義按鈕功能原型
ckeditorcode_gecko.js(fckeditorcode_ie.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的實現(xiàn)代碼放到后面,然后進行修改)
比如:var FCKmydiyCommand=function(){this.Name='mydiy';};FCKmydiyCommand.prototype.Execute=function(){ 這里寫你所需要執(zhí)行的代碼或者函數(shù),比如alert("I am here !");};FCKmydiyCommand.prototype.GetState=function(){return 0;};
將上面代碼插入到查找內(nèi)容之后。
第五步:按鈕功能實例化:
ckeditorcode_gecko.js(fckeditorcode_ie.js):
查找:
case 'NewPage':B=new FCKNewPageCommand();break;
功能實例化:
case 'mydiy':B=new FCKmydiyCommand();break;
將上面代碼插入到查找內(nèi)容之后。
OK,這樣就可以在為FCKeditor加上自定義的按鈕了。
如果要為按鈕加上快捷鍵,可以在fckconfig.js中:FCKConfig.Keystrokes = []加上
[ CTRL + 71 /*G*/, 'mydiy' ],
來自:萍客小居 (http://www.piikee.net/)
fckconfig.js
zh-cn.js
en.js
fckeditorcode_gecko.js || fckeditorcode_ie.js(針對IE以外的瀏覽器||針對ie瀏覽器,如果要支持兩種瀏覽器,就這兩個包都修改)
第一步:在Toolbar中添加功能按鈕
fckconfig.js:FCKConfig.ToolbarSets[“Default”] 中添加按鈕名稱
FCKConfig.ToolbarSets["Default"] = [
['Bold','Italic','-','About', 'mydiy']
] ;
第二步:為按鈕添加中文名稱和英文名稱
zh-cn.js:為你的按鈕起個中文名字
mydiy : “我的自定義按鈕"
en.js:為你的按鈕起個英文名字
mydiy:"mydiybutton"
第三步:在Toolbar中顯示該按鈕
fckeditorcode_gecko.js(fckeditorcode_ie.js):
查找:
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
在break后插入你的代碼
比如case 'mydiy':B=new FCKToolbarButton('mydiy',FCKLang.mydiy,null,null,false,true,50);(這個50是按鈕的顯示圖片,要讓你的自定義按鈕顯示為插入圖片那個按鈕的圖片,可以填入37)
這樣就可以在Toolbar中顯示你的按鈕了
第四步:定義按鈕功能原型
ckeditorcode_gecko.js(fckeditorcode_ie.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的實現(xiàn)代碼放到后面,然后進行修改)
比如:var FCKmydiyCommand=function(){this.Name='mydiy';};FCKmydiyCommand.prototype.Execute=function(){ 這里寫你所需要執(zhí)行的代碼或者函數(shù),比如alert("I am here !");};FCKmydiyCommand.prototype.GetState=function(){return 0;};
將上面代碼插入到查找內(nèi)容之后。
第五步:按鈕功能實例化:
ckeditorcode_gecko.js(fckeditorcode_ie.js):
查找:
case 'NewPage':B=new FCKNewPageCommand();break;
功能實例化:
case 'mydiy':B=new FCKmydiyCommand();break;
將上面代碼插入到查找內(nèi)容之后。
OK,這樣就可以在為FCKeditor加上自定義的按鈕了。
如果要為按鈕加上快捷鍵,可以在fckconfig.js中:FCKConfig.Keystrokes = []加上
[ CTRL + 71 /*G*/, 'mydiy' ],
來自:萍客小居 (http://www.piikee.net/)
相關(guān)文章
關(guān)于jsp版ueditor1.2.5的部分問題解決(上傳圖片失敗)
這篇文章主要介紹大家在使用jsp版ueditor1.2.5的碰到的一些問題解決方法,需要的朋友可以參考下2013-06-06輕松實現(xiàn) CKfinder進駐CKEditor3.0
看完YaSin寫得“將CKfinder 整合進 CKEditor3.0 ”之后,我總覺得問題有點復雜,尤其是修改壓縮了的js文件。2010-01-01新浪博客在線編輯器傻瓜調(diào)用版(2007.11.1第四次修正)提供下載了
新浪博客在線編輯器傻瓜調(diào)用版(2007.11.1第四次修正)提供下載了...2007-11-11又一個不錯的FCKeditor 2.2的安裝、修改和調(diào)用方法
又一個不錯的FCKeditor 2.2的安裝、修改和調(diào)用方法...2007-11-11Ewebeditor及fckeditork單引號問題的解決方法
為什么一個簡單的單引號會引發(fā)不能添加到數(shù)據(jù)庫呢,想到這里,我們想到了分析下入庫代碼并找出了原因,下面是解決方法。2010-04-04FCKeditor .NET的配置、擴展與安全性經(jīng)驗交流
FCKeditor是使用非常廣泛的HTML編輯器,本文從 ASP.NET 的使用場景對 FCKeditor 與 FCKeditor.NET 的配置、功能擴展(如自定義文件上傳子目錄、自定義文件名、上傳圖片的后期處理等)、以及安全性進行初步的闡述。2011-08-08SyntaxHighlighter 去掉右側(cè)滾動條的方法
SyntaxHighlighter這個是一個高亮插件?,F(xiàn)在被用于很多網(wǎng)站的代碼顯示。但是SyntaxHighlighter3.0.83,由于自適應(yīng)寬和高,導致一直有滾動條的問題2020-03-03SyntaxHighlighter配合CKEditor插件輕松打造代碼語法著色
作為程序員在寫博客文章的時候,經(jīng)常要插入些代碼片斷,很多博客系統(tǒng)都提供代碼語法著色高亮顯示的功能或插件,讓代碼顯示更直接明了2012-09-09