为FckEditor增加插件，添加自定义的功能按钮ToolBarButton

本文为原创文章，转载请注明出处链接和作者！

第一步：需要书写你的插件文件，这里必须注意你的目录结构，默认的插件路径是..../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(rollbond@gmail.com)
 */
FCKLang.Format168Btn    = 'format';

这个是为了给出鼠标悬停到按钮上的提示

插件文件的源代码为：

));

 第二步：修改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>

最后的效果如下图：





如果有什么不明白或者不对的地方，请到论坛发贴提问：www.51ini.com
源码下载：https://files.cnblogs.com/goody9807/FCKeditor.rar