前段时间做一项目,要用到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);
};
在此希望能帮助需要的人。
源代码在这(免费的哦):点击打开链接