- 浏览: 740102 次
- 性别:
- 来自: 郑州
文章分类
- 全部博客 (396)
- JAVA (50)
- ORACLE (22)
- HIBERNATE (1)
- SPRING (26)
- STRUTS (4)
- OTHERS (0)
- MYSQL (11)
- Struts2 (16)
- JS (33)
- Tomcat (6)
- DWR (1)
- JQuery (26)
- JBoss (0)
- SQL SERVER (0)
- XML (10)
- 生活 (3)
- JSP (11)
- CSS (5)
- word (1)
- MyEclipse (7)
- JSTL (1)
- JEECMS (2)
- Freemarker (8)
- 页面特效 (1)
- EXT (2)
- Web前端 js库 (2)
- JSON http://www.json.org (3)
- 代码收集 (1)
- 电脑常识 (6)
- MD5加密 (0)
- Axis (0)
- Grails (1)
- 浏览器 (1)
- js调试工具 (1)
- WEB前端 (5)
- JDBC (2)
- PowerDesigner (1)
- OperaMasks (1)
- CMS (1)
- Java开源大全 (2)
- 分页 (28)
- Eclipse插件 (1)
- Proxool (1)
- Jad (1)
- Java反编译 (2)
- 报表 (6)
- JSON (14)
- FCKeditor (9)
- SVN (1)
- ACCESS (1)
- 正则表达式 (3)
- 数据库 (1)
- Flex (3)
- pinyin4j (2)
- IBATIS (3)
- probe (1)
- JSP & Servlet (1)
- 飞信 (0)
- AjaxSwing (0)
- AjaxSwing (0)
- Grid相关 (1)
- HTML (5)
- Guice (4)
- Warp framework (1)
- warp-persist (1)
- 服务器推送 (3)
- eclipse (1)
- JForum (5)
- 工具 (1)
- Python (1)
- Ruby (1)
- SVG (3)
- Joda-Time日期时间工具 (1)
- JDK (3)
- Pushlet (2)
- JSP & Servlet & FTP (1)
- FTP (6)
- 时间与效率 (4)
- 二维码 (1)
- 条码/二维码 (1)
最新评论
-
ctrlc:
你这是从web服务器上传到FTP服务器上的吧,能从用户电脑上上 ...
jsp 往 FTP 上传文件问题 -
annybz:
说的好抽象 为什么代码都有两遍。这个感觉没有第一篇 和第二篇 ...
Spring源代码解析(三):Spring JDBC -
annybz:
...
Spring源代码解析(一):IOC容器 -
jie_20:
你确定你有这样配置做过测试? 请不要转载一些自己没有测试的文档 ...
Spring2.0集成iReport报表技术概述 -
asd51731:
大哥,limit传-1时出错啊,怎么修改啊?
mysql limit 使用方法
需要修改的文件:
fckconfig.js
zh-cn.js
fckeditorcode_gecko.js || fckeditorcode_ie.js(这里针对gecko的浏览器,ie的相同)
Step 1:在Toolbar中添加功能按钮
fckconfig.js:FCKConfig.ToolbarSets[“Basic”] 中添加按钮名称
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','About', 'Test']
] ;
Step 2:为按钮添加中文名称
zh-cn.js:为你的按钮起个名字
DlgAboutInfo : "要获得更多信息请访问 ",
Test : "测试"
Step 3:在Toolbar中显示该按钮
fckeditorcode_gecko.js:(这个JS的代码经过压缩,可以使用工具格式化再进行修改)
查找:
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
在break后插入你的代码
case 'Test':B=new FCKToolbarButton('Test',FCKLang.Test,null,null,true,null,50);break;
这样就可以在Toolbar中显示你的按钮了
Step 4:定义按钮功能原型
ckeditorcode_gecko.js:
查找:
var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
定义功能原型:(这里直接复NewPage的实现代码,可修改成自已的)
var FCKTestCommand=function(){this.Name='NewPage';};
FCKTestCommand.prototype.Execute=function(){function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
将上面代码搜入到查找内容之后。
Step 5:按钮功能实例化:
ckeditorcode_gecko.js:
查找:
case 'NewPage':B=new FCKNewPageCommand();break;
功能实例化:
case 'Test':B=new FCKTestCommand();break;
将上面代码搜入到查找内容之后。
OK,这样就可以在为FCKeditor加上自定义的按钮了。
--------------------------------------------------------------------------------
http://itblog.org/read.php?id=103 这是原文,我就是看着这个做出来的 感谢作者
但过程中遇到些问题 下面对这篇文章做了一些小的解释 希望对象我这样的菜鸟有所帮助
增加按钮有以下几步:
1、为按钮增加图片:
FCK的所有按钮图片是存放在一个图片文件 里的,这一点比较独特,文件存放在相应皮肤目录下,如:/FCK/skins/silever/fck_strip.gif。通过Fireworks或 Phtoshop打开该文件可以发现一个很长的图片,里面包含所有按钮的图片,现在您可以在该图片的最下面增加您自定义的按钮,注意,每个按钮的尺寸是 16*16px。
2、为按钮增加功能代码
增 加按钮需要对FCK/editor/js目录中的两个核心文件进行修改:fckeditorcode_gecko.js和 fckeditorcode_ie.js,前者是使用于gecko核心的浏览器如Firefox等,而后者应用于以IE为核心的浏览器如MyIE(傲游) 等,这两个文件大体是相似的,仅有微小差别,在此我们基本无须担心。
修改的方法非常简单,基本是一个照葫芦画瓢 的过程,首先我们找一个与我们将要添加的按钮功能相似的一个按钮,这里我们选择了Newpage,这是一个清空编辑器以备新建一个文件的按钮。首先我们修 改fckeditorcode_ie.js,fckeditorcode_gecko.js直接复制更改的代码就可以了。
打开 fckeditorcode_ie.js,这里需要说明的是,fckeditorcode_ie.js是多个文件合并经过代码优化的(即去掉了大部分换 行、空格、注释等)不是很容易阅读,而且这样一百多K的JS文件用Dreamweaver、ZDE等工具打开后CPU立刻升至100%,相信计算机就变成 痴呆一样了,经过一翻比较,发现曾被我认为一文不值的Golive竟然可以轻松打开该文件并快速编辑!(!VS也可以)不管你用什么软件反正能打开并编辑就行了。以关键词Newpage进行查找,你会发现一个按钮的功能定义分三大部分:
A、功能原型
// 按钮功能原型
var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
var FCKMyAlbumCommand=function(){this.Name='DISPLAY: none';};
FCKMyAlbumCommand.prototype.Execute=function(){if(typeof(parent.showMyAlbum)=="function"){parent.showMyAlbum(FCK);}else{alert(FCKLang.NoAlbum);}};
FCKMyAlbumCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
(!showMyAlbum应为函数 放在调用编辑器的页面里)
B、功能的实例化
case 'NewPage':B=new FCKNewPageCommand();break;
case 'MyAlbum':B=new FCKMyAlbumCommand();break;
C、按钮的显示
case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;
case 'MyAlbum':B=new FCKToolbarButton('MyAlbum',FCKLang.MyAlbum,null,null,true,null,67);break;
上面代码中第一部分是Newpage的原代码,后一部分是我们自定义的代码,您一看应该明白怎么回事了吧?仅红色部分和名称不同而已!而红色部分就是我们的自定义功能。
FCKLang是语言包对象,您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了,比如:MyAlbum打开我的像册。注意大小写!至此我们的添加工作已完成。
但是,接着发现有个问题,就是怎么往编辑域内插入HTML代码了,忽然想起FCK自带的API似乎有这个功能,于是就去示例页查找,终于在/FCKeditor/_samples/html/sample08.html找到方法了.用
var oEditor = FCKeditorAPI.GetInstance('content'); if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>----------||----------</p>');}else{alert ('不能在源代码模式下进行该操作!');}
代替
var oEditor = FCKeditorAPI.GetInstance('content'); if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>----------||----------</p>');}else{alert ('不能在源代码模式下进行该操作!');}
这一段
FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;
注意:FCKeditorAPI.GetInstance('content'); 其中content是编辑器的名称
这里可以这样写
function showMyAlbum(oEditor)
{
if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG ){oEditor.InsertHtml('<p>Success! </p>');}else{alert ('不能在源代码模式下进行该操作!');}
}
这样就可以在页面里自定义编辑器id而不用更改函数
fckconfig.js里面的
FCKConfig.ToolbarSets["Default"] = [
['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','-','Cowboy'] // No comma for the last row.
在这里设置要显示的按钮
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
(一).添加自定义工具栏
涉及到三组文件:
1.fckeditor\editor\lang下的文件(这是界面多语言支持的文件夹,在此只修改英文和简体中文支持的.js文件)
en.js:
zh-cn.js:
2.fckeditor\editor\js下的文件(这是多浏览器支持的文件夹,FCKEditor 核心代码。为了减少大小,该文件夹的文件已被压缩,未被压缩的文件在"fckeditor\editor\_source"中。
fckeditorcode_gecko.js:提供"类火狐"等浏览器支持。
fckeditorcode_ie.js:提供"类IE"等浏览器支持。
以上文件共要改两处:
(1).在以上文件中查找"default:if (FCKRegexLib",在default 前插入"case 'InsertCode':B = new FCKDialogCommand('InsertCode' ,FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.aspx',700,600);break"
FCKDialogCommand()方法:
参数1,2:按钮名称,跟前面语言支持文件中定义的对应
参数3:点击该按钮后显示的文件
参数4,5:弹出窗口的宽和高
(2).继续查找"default:alert(FCKLang.UnknownToolbarItem",在"default"前插入"case 'InsertCode':B = new FCKToolbarButton('InsertCode', FCKLang.InsertCode,null,null,null,null,69);break;"
最后的参数是工具栏图标的索引(FCKEditor版本不同,索引不同),图标文件fckeditor\editor\skins\office2003\fck_strip.gif,在图片的最后增加一个16*16的图标。索引计算方法是:该图片高度除16即得到最后一个图标索引号。
3.fckeditor\fckconfig.js
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/qbb3050466/archive/2009/02/11/3877521.aspx
发表评论
-
fck 限制上传图片的宽度
2010-12-03 17:14 1653修改 fckeditor\editor\dialog\fck_ ... -
FCKeditor简介及常用配置 在网页中使用FCKeditor FCKeditor字符转义的问题
2010-11-01 20:51 3501FCKeditor2.3控件使用指南 FCKedit ... -
FCkeditor添加新的选项卡到图片属性对话框
2010-07-28 10:41 14831.添加选项卡打开fckeditor/editor/dialo ... -
FCKEditor自动过滤的解决办法
2010-07-28 10:40 1120如果您需要编辑模板页,默认的FCK设置是会去掉标签,而且会给你 ... -
(转)FCKeditor2.6在线文本编辑器
2010-07-16 09:39 1275多文件上传: Struts2也可以很方便地实现多文件上传。 ... -
FCKeditor学习笔记
2010-07-16 09:30 2751一、自我认识: 1、类似world的编辑器 2、所见即所得 ... -
fckeditor-java-2.6中遇到的问题
2010-07-16 08:57 10351.gb2312编码工程中文乱码 解决方法: (1)重写j ... -
js中获取Fckeditor的值
2010-06-18 14:26 2068// 获取编辑器中HTML内容 function g ...
相关推荐
FCK添加上传视频,想添加图片一样,便捷方便。
fck上传等功能不能使用(fck和ie9的问题)
fck 编辑器是最流行的网页编辑器之一,在其中修改了图片的保存路径,添加了表情信息。
fck控件fck控件fck控fck控件fck控件fck控件fck控件fck控件fck控件fck控件件fck控件fck控件fck控件
FCK在线编辑器 它有什么功能百度基本都能知道 ...实例就不给了 自己配置一次 才能记忆... 我们添加一个选项卡,取名为FCK,在其下 “选择项”,浏览到当前项目里的 D:\FckDemo\bin\FredCK.FCKeditorV2.dll,点确定。。。
FCK多功能编辑器
比如CUTEEDITOR,虽 然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以 说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的...
web页面 FCK编辑器 web页面 FCK编辑器web页面 FCK编辑器
FCK编辑器FCK编辑器FCK编辑器FCK编辑器FCK编辑器FCK编辑器FCK编辑器
fck 远程图片 下载到本地。很使用的一个功能,使你复制网页上的文章不用再一个个下载到本地再上传,也不用担心别的网页的文章删除导致你的图片不可用。
可以直接配置的fck 可以多媒体上传 全都已经配置好的
然后找到FCK工具栏按钮设置代码,我这里以图片按钮为例 ,'Image', 在其后插入谷歌地图按钮代码 'googlemaps', 然后在此文件的最后添加一句KEY代码如下 FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5...
FCK控件 fckeditor,强大插件,最完整。 即插即用
FckEditor有一个Word黏贴功能,不过如果Word中包含图片,则图片是不能显示的,因为图片不能自动上传到服务器,正好最近做的一个项目有这个需求,就研究了一下如何实现类似eWebEditor的Word...给FckEditor添加导入按钮
.Net中Fck用法详解(带fck) 一个word文档说明fck在Asp中的用法 适用于初学者
fck web 编辑器 eclipse 6.5 工程
强大的FCK编辑器修改版兼容多个浏览器支持图片上传功能 绝对好用 下载即可用 有问题请联系我 QQ 451082729
fck,fck文档,fckjar包,jar包
java fck例子
.net fck 带图片编译器 还有.net验证码