fckeditor自定义工具栏控件
2013-08-04 18:49
197 查看
这里说的自定义工具栏控件是在fckeditor编辑器中新加入一个按钮,按钮的功能是自定义的,不是fckeditor自己预先有的按钮功能
该按钮实现弹出自定义页面页面是自定义的,页面三个元素:文本框、确定按钮、取消按钮,点击确定可以把数据添加到fckeditor编辑器中,
类似CSDN编辑器中的插入代码。
步骤:
1、在 fckeditor/fckconfig.js 文件中添加功能按钮
加入工具栏中
2、在 fckeditor\editor\lang 文件夹为自定义的按钮加入标识
中文对应的文件:zh-cn.js
英文对用的文件:en.js
3、新建文件 plugins\userButton\fckplugin.js
其中userButton是自定义按钮的名称。
在里面放仿照该文件夹下的例子实现该功能。
4、按钮图片问题
fckeditor的所有按钮图片是存放在一个图片文件里的,文件存放在相应皮肤目录下,如:/fckeditor/skins/silever/fck_strip.gif。你可以通过PS加入当前新按钮的图标,注意,每个按钮的尺寸是 16*16px。
该按钮实现弹出自定义页面页面是自定义的,页面三个元素:文本框、确定按钮、取消按钮,点击确定可以把数据添加到fckeditor编辑器中,
类似CSDN编辑器中的插入代码。
步骤:
1、在 fckeditor/fckconfig.js 文件中添加功能按钮
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; // FCKConfig.Plugins.Add( 'autogrow' ) ; // FCKConfig.Plugins.Add( 'dragresizetable' ); //add FCKConfig.Plugins.Add('userButton'); FCKConfig.AutoGrowMax = 400 ;
加入工具栏中
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', 'userButton'] ];
2、在 fckeditor\editor\lang 文件夹为自定义的按钮加入标识
中文对应的文件:zh-cn.js
英文对用的文件:en.js
userButtonBtn :"自定义按钮"
3、新建文件 plugins\userButton\fckplugin.js
其中userButton是自定义按钮的名称。
在里面放仿照该文件夹下的例子实现该功能。
FCKCommands.RegisterCommand('userButton', new FCKDialogCommand('userButton', FCKLang["userButtonBtn"], FCKPlugins.Items['userButton'].Path + 'MyPage.htm', 400, 300));//MyPage.htm是新建的页面,后面的是大小 var ouserButton=new FCKToolbarButton('userButton',null,FCKLang["userButtonBtn"],null,false,true,74); FCKToolbarItems.RegisterItem('userButton',ouserButton); var FCKuserButton = new Object(); FCKuserButton.Add = function(txt) { var coText = FCK.CreateElement('DIV'); coText.innerHTML += txt; return 1; }
4、按钮图片问题
fckeditor的所有按钮图片是存放在一个图片文件里的,文件存放在相应皮肤目录下,如:/fckeditor/skins/silever/fck_strip.gif。你可以通过PS加入当前新按钮的图标,注意,每个按钮的尺寸是 16*16px。
相关文章推荐
- Asp.net中使用WEB编辑控件FCKEditor
- FCKeditor在ASP.NET AJAX的UpdatePanel控件中按钮回调后内容丢失的问题
- asp.net控件RequiredFieldValidator验证FCKeditor提交两次才能成功的解决方法
- FCKeditor2.3控件使用指南
- JSP中fckeditor控件表情修改以及文件上传
- fckeditor控件问题
- FCKEditor控件的配置使用
- FCKEditor 控件配置备忘
- php下配置使用FCKeditor控件
- 最近使用Fckeditor控件 也只能说简单的使用
- 控件发布:FCKeditor ASP.NET 2.0 WebControl
- FCKEditor——添加自定义工具栏
- FCKeditor2.6.4控件及其使用范例
- Jsp页面中使用fckeditor控件的两种方法
- Fckeditor 拖拽控件大小的问题
- FCKeditor在线文本编辑器控件
- 为FCKEditor添加自定义工具栏
- 解决FCKeditor在ASP.NET AJAX的UpdatePanel控件中按钮回调后内容丢失的问题
- Jsp页面中使用fckeditor控件的两种方法