第一步:需要书写你的插件文件,这里必须注意你的目录结构,默认的插件路径是..../editor/plugins/
为了方便起见我们不改变默认路径,先在这个目录下创建一个存放插件的文件夹,这里我们起名为formatcommands
然后我们在此目录下创建一个fckplugin.js,记住这里插件的名字必须为这个名字(大小写也要一致),然后我们在创建一个语言包
文件夹lang,最后把需要的图标文件也放在与插件文件fckplugin.js同目录下,具体的文件目录请看图:
![](https://images.cnblogs.com/cnblogs_com/goody9807/fck1.JPG)
补充说明一下: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(rollbond@gmail.com)
*/
FCKLang.Format168Btn = 'format';
这个是为了给出鼠标悬停到按钮上的提示
插件文件的源代码为:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//*
* 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 (rollbond@gmail.com)
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// Create the "Format168" toolbar button
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
var oFormat168Item = new FCKToolbarButton('Format168', FCKLang.Format168Btn);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//设置按钮的图标路径
oFormat168Item.IconPath = FCKPlugins.Items['formatcommands'].Path + 'format168.jpg';
//注册按钮项
FCKToolbarItems.RegisterItem('Format168', oFormat168Item);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// The object used for all Format168 operations.
var FCKFormat168 = new Object();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
FCKFormat168 = function(name)
{
this.Name = name;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//FCK_TRISTATE_ON为默认是选中状态
下面的两个方法是实现接口的两个必须的方法,否则会报脚本错误
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
FCKFormat168.prototype.GetState = function()
{
return FCK_TRISTATE_OFF;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//此方法是点击按钮后要完成的操作
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
FCKFormat168.prototype.Execute = function()
{
FormatText();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//以下都是实现功能的方法
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function FormatText()
{
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var temps = new Array();
var sec = oEditor.EditorDocument.selection.createRange();
var tmpText = sec.text;
var isPart = tmpText != null && tmpText.trim().length > 0;
isPart = false; //暂时无法实现局部格式化
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!isPart)
{
var imgs = oEditor.EditorDocument.images;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (imgs != null && imgs.length > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (j = 0; j < imgs.length;)
{
imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";
formatImgCount++;
}
}
var html = processFormatText(oEditor.EditorDocument.body.innerText);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (temps != null && temps.length > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
var html = processFormatText(tmpText);
sec.pasteHTML(html);
}
}
else
alert( '必须在设计模式下操作!' ) ;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function DBC2SBC(str)
{
var result = '';
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < str.length; i++)
{
code = str.charCodeAt(i);
// “65281”是“!”,“65373”是“}”,“65292”是“,”。不转换","
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (code >= 65281 && code < 65373 && code != 65292 && code != 65306)
{
// “65248”是转换码距
result += String.fromCharCode(str.charCodeAt(i) - 65248);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
result += str.charAt(i);
}
}
return result;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function processFormatText(textContext)
{
var text = DBC2SBC(textContext);
var prefix = " ";
var tmps = text.split("\n");
var html = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (i = 0; i < tmps.length; i++)
{
var tmp = tmps[i].trim();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (tmp.length > 0)
{
html += "<p> " + tmp + "</p>\n";
}
}
return html;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
String.prototype.trim = function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
return this.replace(/(^[\s ]*)|([\s ]*$)/g, "");
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
String.prototype.leftTrim = function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
return this.replace(/(^\s*)/g, "");
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
String.prototype.rightTrim = function()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
return this.replace(/(\s*$)/g, "");
};
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// Register the related command
FCKCommands.RegisterCommand('Format168', new FCKFormat168('Format168'));
第二步:修改fck默认的配置文件
直接修改默认的配置文件 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>
最后的效果如下图:
![](https://images.cnblogs.com/cnblogs_com/goody9807/fck2.JPG)