本文爲原創文章，轉載請註明出處鏈接和作者！
第一步：需要書寫你的插件文件，這裏必須注意你的目錄結構，默認的插件路徑是..../editor/plugins/
爲了方便起見我們不改變默認路徑，先在這個目錄下創建一個存放插件的文件夾，這裏我們起名爲formatcommands
然後我們在此目錄下創建一個fckplugin.js，記住這裏插件的名字必須爲這個名字（大小寫也要一致），然後我們在創建一個語言包
文件夾lang，最後把需要的圖標文件也放在與插件文件fckplugin.js同目錄下，具體的文件目錄請看圖:
補充說明一下：lang文件夾下面是語言包文件，這裏我創建了一個en.js 注意 en是國別碼都是小寫的 ，如果要是中文可以寫成 zh-cn.js
en.js 的源碼爲：
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2006 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* "Support Open Source software. What about a donation today?"
*
* File Name: en.js
* Marquee English language file.
*
* File Authors:
* Yogananthar Ananthapavan([email protected])
*/
FCKLang.Format168Btn = 'format';這個是爲了給出鼠標懸停到按鈕上的提示 插件文件的源代碼爲：
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2006 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* "Support Open Source software. What about a donation today?"
*
* File Name: fckplugin.js
* Plugin for Format168 background
*
*
* File Authors:
* Yogananthar Ananthapavan ([email protected])
*/
// Create the "Format168" toolbar button
var oFormat168Item = new FCKToolbarButton('Format168', FCKLang.Format168Btn);
//設置按鈕的圖標路徑
oFormat168Item.IconPath = FCKPlugins.Items['formatcommands'].Path + 'format168.jpg';
//註冊按鈕項
FCKToolbarItems.RegisterItem('Format168', oFormat168Item);
// The object used for all Format168 operations.
var FCKFormat168 = new Object();
FCKFormat168 = function(name){
this.Name = name;
}
//FCK_TRISTATE_ON爲默認是選中狀態
下面的兩個方法是實現接口的兩個必須的方法，否則會報腳本錯誤
FCKFormat168.prototype.GetState = function() {
return FCK_TRISTATE_OFF;
}
//此方法是點擊按鈕後要完成的操作
FCKFormat168.prototype.Execute = function(){
FormatText();
}
//以下都是實現功能的方法
function FormatText() {
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
{
var temps = new Array();
var sec = oEditor.EditorDocument.selection.createRange();
var tmpText = sec.text;
var isPart = tmpText != null && tmpText.trim().length > 0;
isPart = false; //暫時無法實現局部格式化
if (!isPart) {
var imgs = oEditor.EditorDocument.images;
if (imgs != null && imgs.length > 0) {
for (j = 0; j < imgs.length; j++) {
var t = document.createElement("IMG");
t.alt = imgs[j].alt;
t.src = imgs[j].src;
t.width = imgs[j].width;
t.height = imgs[j].height;
t.align = imgs[j].align;
temps[temps.length] = t;
}
var formatImgCount = 0;
for (j = 0; j < imgs.length;) {
imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";
formatImgCount++;
}
}
var html = processFormatText(oEditor.EditorDocument.body.innerText);
if (temps != null && temps.length > 0) {
for (j = 0; j < temps.length; j++) {
var imghtml = "<img src=/"" + temps[j].src + "/" alt=/"" + temps[j].alt + "/" width=/"" + temps[j].width + "/" height=/"" + temps[j].height + "/" align=/"" + temps[j].align + "/">";
html = html.replace("#FormatImgID_" + j + "#", imghtml);
}
}
oEditor.SetHTML(html);
} else {
var html = processFormatText(tmpText);
sec.pasteHTML(html);
}
}
else
alert( '必須在設計模式下操作！' ) ;
}
function DBC2SBC(str) {
var result = '';
for (var i = 0; i < str.length; i++) {
code = str.charCodeAt(i);
// “65281”是“！”，“65373”是“｝”，“65292”是“，”。不轉換"，"
if (code >= 65281 && code < 65373 && code != 65292 && code != 65306){
// “65248”是轉換碼距
result += String.fromCharCode(str.charCodeAt(i) - 65248);
} else {
result += str.charAt(i);
}
}
return result;
}
function processFormatText(textContext) {
var text = DBC2SBC(textContext);
var prefix = " ";
var tmps = text.split("/n");
var html = "";
for (i = 0; i < tmps.length; i++) {
var tmp = tmps[i].trim();
if (tmp.length > 0) {
html += "<p> " + tmp + "</p>/n";
}
}
return html;
}
String.prototype.trim = function()
{
return this.replace(/(^[/s ]*)|([/s ]*$)/g, "");
};
String.prototype.leftTrim = function()
{
return this.replace(/(^/s*)/g, "");
};
String.prototype.rightTrim = function()
{
return this.replace(/(/s*$)/g, "");
};
// Register the related command
FCKCommands.RegisterCommand('Format168', new FCKFormat168('Format168'));直接修改默認的配置文件 fckconfig.js
從FCKeditor文件夾下找到fckconfig.js
找到下面這句：FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; 然後增加： FCKConfig.Plugins.Add('formatcommands') ; 'formatcommands'是你的插件文件夾的名字，大小寫也要都一樣 第三步：增加自定義的ToolBarSet
FCKConfig.ToolbarSets["MyToolbar"] = [
['Source','Preview','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
['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','-','About','Format168'] // No comma for the last row.
] ;
這裏的Format168 是你插件文件中預先註冊的名字 最後在頁面上創建一個fckEditor
<div>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "FCKeditor/";
oFCKeditor.ToolbarSet='MyToolbar';
oFCKeditor.Height ="300";
oFCKeditor.Create();
</script>
</div>
最後的效果如下圖：
如果有什麼不明白或者不對的地方，請到論壇發貼提問：www.51ini.com
源碼下載：http://www.cnblogs.com/Files/goody9807/FCKeditor.rar