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' );
//add
FCKConfig.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);
    };

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

 

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