fck插件，自定义控件

前段时间做一项目，要用到fck编辑器，fck功能非常强大是无可非议的。但是满足不了我们现有的部分模块，百度了一大堆有的说的不是很详细，so，在这把自己的做出来的结果与大家一起分享，更希望能帮助需要的人。

先说下我实现的具体功能，在fck编辑器中签入一按钮，点击该按钮后弹出一页面页面是自定义的，该页面可以刷新，刷新后对fck页面上的原有数据是没有影响的。弹出页面中有一确定按钮和一取消按钮，点击确定可以把数据添加到fck编辑器中。

先建一web项目，把fck组件添加到web项目中（不知道怎么添加到项目中的，请百度，在这就不多说了）。

 

在fckconfig.js文件中要添加功能按钮

FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;// FCKConfig.Plugins.Add( 'autogrow' ) ;// FCKConfig.Plugins.Add( 'dragresizetable' );//addFCKConfig.Plugins.Add('insertcode');FCKConfig.AutoGrowMax = 400 ;

FCKConfig.Plugins.Add('insertcode');是要添加的其它部分是fck中自带的，写在这里容易去区分、查找。 

FCKConfig.ToolbarSets["Default"] = [['Source', 'DocProps', '-', 'Save', 'NewPage', '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', 'CreateDiv', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull', 'Link', 'Unlink', 'Anchor', 'Image', 'Flash', 'Table', 'Rule', 'Smiley'], '/',['SpecialChar', 'PageBreak', 'Style', 'FontFormat', 'FontName', 'FontSize', 'TextColor', 'BGColor', 'FitWindow', 'ShowBlocks', '-', 'About', 'InsertCode']// No comma for the last row.];//Basic适于3栏300宽FCKConfig.ToolbarSets["Basic"] = [    ['Source', 'Preview', '-'],    ['StrikeThrough', 'Undo', 'Redo', 'Image', 'OrderedList', 'UnorderedList', 'CreateDiv', '-','Table', 'Flash',],    [ 'Bold', 'Underline','JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull', 'TextColor', 'BGColor', '-',  ],    [ 'Style', 'FontFormat'],[ 'FontName', 'FontSize', 'InsertCode']];//Main适于2栏460宽FCKConfig.ToolbarSets["Main"] = [    ['Source', 'Preview', '-'], '/',    ['Bold', 'Underline', 'StrikeThrough','Undo', 'Redo', 'Image', 'Flash', 'Table', '-'],['TextColor', 'BGColor','OrderedList', 'UnorderedList', 'CreateDiv', '-', 'JustifyLeft'],[ 'JustifyCenter', 'JustifyRight', 'JustifyFull', '-', 'Style'], ['FontFormat', 'FontName', 'FontSize', 'InsertCode'],];

在“Default”、“Basic”、“Main”的最后加“InsertCode”。

fckconfig.js文件的配置就好了。

在lang文件中zh-cn.js文件的最后给按钮添加中文标示

InsertCodeBtn       :"插入资讯列表"

这个是在中文版本的js中设置的，如有需要可以在别的js中设置如英文版本的是在en.js文件中设置；zh-cn.js文件设置结束。

 

设置好后在plugins文件中添加一新的文件夹“insertcode”“insertcode”文件下加一js文件“fckplugin.js”

fckplugin.js的内容如下：

FCKCommands.RegisterCommand('InsertCode', new FCKDialogCommand('InsertCode', FCKLang["InsertCodeBtn"], FCKPlugins.Items['insertcode'].Path + '../../../../A.aspx', 1000, 520));  //'../../../../insertList.aspx'是要弹出的页面地址，1000和520是弹出页面后的大小var oInsertCode=new FCKToolbarButton('InsertCode',null,FCKLang["InsertCodeBtn"],null,false,true,74);  //最后74是显示在fck编辑器上该按钮的图标，图标是可以自定义FCKToolbarItems.RegisterItem('InsertCode',oInsertCode);var FCKInsertCode = new Object();FCKInsertCode.Add = function(txt) {    var coText = FCK.CreateElement('DIV');    coText.innerHTML += txt;    return 1;}

FCK的所有按钮图片是存放在一个图片文件 里的，这一点比较独特，文件存放在相应皮肤目录下，如：/FCK/skins/silever/fck_strip.gif。通过Fireworks或 Phtoshop打开该文件可以发现一个很长的图片，里面包含所有按钮的图片，现在您可以在该图片的最下面增加您自定义的按钮，注意，每个按钮的尺寸是 16*16px。

 

好啦，fck的js配置已经搞定，接下来就是新建要弹出的页面A.aspx，我这里A.asp页面是在根目录下的，在A.asp页面HEAD部分要加以下代码

<link href="fckeditor/editor/dialog/common/fck_dialog_common.css" rel="Stylesheet" type="text/css" />    <script language="javascript" type="text/javascript">        var oEditor = window.parent.InnerDialogLoaded();        var FCKInsertCode = oEditor.FCKInsertCode;        oEditor.FCKLanguageManager.TranslatePage(document);        window.parent.SetOkButton(true);     //设置OK按钮        function Ok() {   //确定按钮点击事件            var value = document.getElementById("TextBox1").value;            FCKInsertCode.Add(value);            return true;        }    </script>

body部分加一个<asp:TextBox ID="TextBox1" runat="server" Height="218px" Width="941px"></asp:TextBox>控件

 

好啦，fck配置搞定，新页面也好了，现在新建一页面引入fck编辑器就可以用了，在这自定义的按钮是第三排的最后一个，图标可以自己来修改。

有的时候要在弹出页面的取消按钮中出来别的事件，可以在fckdialog.html文件中window.Cancel方法里添加你额外的方法

    window.Cancel = function(dontFireChange) {        Selection.EnsureSelection();        return CloseDialog(dontFireChange);    };

在此希望能帮助需要的人。

 

源代码在这（免费的哦）：点击打开链接