- 浏览: 2473715 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (574)
- Book (62)
- Architecture (6)
- Java (39)
- Taobao (41)
- Distributed (4)
- Life (72)
- Database (7)
- Spring (16)
- Photography (15)
- Bicycle (41)
- Test (20)
- jBPM (8)
- Business (12)
- Movie (3)
- Ajax (15)
- Code (7)
- Eclipse (96)
- VIM (2)
- Music (6)
- Groovy (10)
- AutoHotKey (3)
- Dorado (10)
- Maven (7)
- Scrum (5)
- English (20)
- Financial (12)
- OSGi (3)
- Other (4)
- Tool (6)
- Browser (1)
- PPT (1)
- Project Management (4)
- Agile (6)
- Nosql (1)
- Search engine (6)
- Shell (2)
- Open Source (4)
- Storm (10)
- Guava (3)
- Baby (1)
- netty (1)
- Algorithm (1)
- Linux (1)
- Python (2)
最新评论
-
roy2011a:
https://github.com/ebottabi/sto ...
storm的序列化问题及与spring的结合方式 -
roy2011a:
能抗能打 写道哥们儿,你好!能共享下那个storm与sprin ...
storm的序列化问题及与spring的结合方式 -
Alick1:
兄弟,你之前是不是在深圳的正阳公司呆过啊?
storm的ack和fail -
liuleixwd:
先点个赞,写的非常好!有个问题请教下,如果我再bolt里不用e ...
storm的ack和fail -
yao-dd:
solr的facet查询
Rich Editor是我们在Web应用经常使用的一种客户端控件,目前网上开源的、收费的也比较多,在对网上各种富文本编辑器进行了一系列比较之后,我最终选择了FCKEditor(http://www.fckeditor.net, JavaEye的编辑器也是采用的FCKEditor,XX所见略同?呵呵),它OpenSource(免费啊,可以直接改源代码啊,呵呵),功能强大(几乎就是一个office word的web版),提供了对各种服务器端的支持(虽然它完全是一个纯客户端的东东, 但是目前提供了与.NET, PHP, Java, Coldfusion, Perl, Lasso, Python各种服务器端脚本的紧密集成),支持国际化(汉化做的非常棒),可更换皮肤(office 2000的风格简直可以乱真),内嵌文件上传(Java版本支持这个),保持一定的更新状态(目前版本为2.3.2),如此等等。当然它还有N多功能,不过我还没仔细去研究,如果有哪位用到的,可以告知一二。
至于FCKEditor的各种用法我就不在这里一一列举,网上有很多相关的文章,它也自带了不错的sample,可以非常容易加入到我们自己的项目中去。
不过在Ajax应用中如何使用FCKEditor控件呢?这个FCKEditor好像没有提供相应的答案,因为Ajax都是采用的无刷新提交,而FCKEditor只能在Form提交方式下使用,为什么这样说呢,那我们还得从FCKEditor的执行流程说起。
FCKEditor的编辑器实际上是一个IFrame,每次在创建一个FCKEditor实体的时候,都会新建一个IFrame,然后各种toolbar和编辑区都塞到这个IFrame中去了,在IFrame外面必须有一个对应的input元素(这个一般是一个textarea,FCKEditor中称之为LinkedField),这样就可以将textarea中的已有的内容导入到编辑器中,或者将编辑好的内容更新到LinkedField中。那FCKEditor中的内容是何时保存到对应的LinkedField中去的呢?开始我没有看源码,以为是在FCKEditor中的内容发生改变的时候同时更新LinkedField的,后来发现不是,如果是这样的话,那我们就可以很容易在ajax中使用FCKEditor了。那到底是什么时候做到与LinkedField同步的呢?答案肯定是在form执行submit事件之前,要在submit之前做到更新唯一的方式就是通过attachEvent方式将更新的回调函数绑定到onsubmit事件上,然后通过一定的方式在submit之前调用绑定的函数。因此就在FCKEditor提供的核心js文件中查找onsubmit,后来在fckeditorcode_ie.js文件找到了onsubmit关键字(这里不得不提到的一点,FCKEditor虽然做到了开源,但是对于他们的javascript源代码还是有所保留的,里面的很多核心js文件都进行了混淆重排,不过这个也不能怪人家不厚道,为了方便查看源代码,吐血推荐采用MyEclipse的document format功能进行格式化处理,这样基本上可以对里面的结构一目了然了)。
相关代码如下,首先是在FCKEditor初始化的时候:
然后是submit提交前的处理:
真正更新处理代码如下:
OK,大致过程我们基本上已经了解了,至于FCKEditor是如何在执行onsubmit之前执行绑定的更新处理的,暂且不表。
不过这里对FCKEditor的几个对象类需要了解一下,一个是FCKConfig(保存一些相关的配置信息),FCK(取编辑器中编辑的内容需要用到的)。这些类都存活在编辑器所在的IFrame页面之中,在LinkedField所在的页面是无法访问到的。
下面是我们的使用代码,这里是通过js创建FCKEditor实例的方式。
首先定义一个全局的FCKEditor对象:
在页面初始化之后(一般是在body的onload事件中完成)创建oFCKEditor对象
接下来是在执行ajax请求提交前的处理:
这个就是我的整合过程,其实还是挺简单的,不过碰到一个问题,就是在打开页面之后,输入焦点总是停留在FCKEditor的编辑区里面,而FCKEditor自己提供的例子里面不会出现这个情况,写法也没有什么区别,不知道问题出在哪里,有知道原因的朋友告知一声。
恩,你得好好补习一下js相关的内容.不用submit就调用form的submit方法是一样的,至于如何把内容存入相关域里面,直接赋值就行了,比如你的form用有一个hidden元素,id为content的,那么在js中这样写content.value=richeditor编辑的内容,Request是后台的对象,所以在脚本中直接给其赋值
看样子楼上的研究很深入啊,你说的这些我都没仔细看过,不过我发现在javaeye中使用fckeditor的时候有个问题,如果我编辑的内容中有html元素,保存之后再显示或者编辑看到的内容都会有问题
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
噢,我明白了。那如果我用getElemnetby()也是不是相同的效果?document.getElementById()是DHTML中的方法,eval是Javascript提供的方法,如果需要转换的字符串是html元素的id,那么二者是一样的,如果只是JavaScript对象,则不能使用document.getElementById()方法。
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
噢,我明白了。那如果我用getElemnetby()也是不是相同的效果?
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
做这么久Java都没有见过JDK1.1长的什么样儿,更别提API文档了,不过java老巢SUN网站应该有吧?
这个功能可以参考image, flash以及table那几个toolbar item的做法来实现,基本原理无非是打开一个dialog,然后输入一些内容,点击“确定”按钮,将输入的内容添加到editor相应的位置。
在_source\internals\fcktoolbaritems.js文件中,我们可以看到如下代码:
因此我们可以参照其做法,添加自己的toolbar item。
在创建toolbar item的js文件_source\internals\fcktoolbarbutton.js文件里面我们会找到下面的代码:
然后在_source\internals\fckcommands.js找到GetCommand函数,里面包含了创建image的相关command创建过程:
因此我们要创建自己的dialog,也需要在dilaog目录下面创建一个fck_xxx.html的模版文件,参照image的dialog,其主要工作就是如何在点击确定的时候将输入的内容加入到editor中指定的位置,这里我们可以参考editor\dialog\fck_image\fck_image.js文件的代码:
多谢楼主,受益非浅。多交流。
这个功能可以参考image, flash以及table那几个toolbar item的做法来实现,基本原理无非是打开一个dialog,然后输入一些内容,点击“确定”按钮,将输入的内容添加到editor相应的位置。
在_source\internals\fcktoolbaritems.js文件中,我们可以看到如下代码:
因此我们可以参照其做法,添加自己的toolbar item。
在创建toolbar item的js文件_source\internals\fcktoolbarbutton.js文件里面我们会找到下面的代码:
然后在_source\internals\fckcommands.js找到GetCommand函数,里面包含了创建image的相关command创建过程:
因此我们要创建自己的dialog,也需要在dilaog目录下面创建一个fck_xxx.html的模版文件,参照image的dialog,其主要工作就是如何在点击确定的时候将输入的内容加入到editor中指定的位置,这里我们可以参考editor\dialog\fck_image\fck_image.js文件的代码:
慢主要是toolbar,所以可以针对toolbar根据需要进行裁剪
如果不需要使用国际化,则只保留中文,具体做法可以google,网上有很多
希望更多的朋友总结一些使用FCKEditor的经验,呵呵。
我最近一直在用FCKEditor ,感觉还不错.不知道LZ要哪方面的经验呢?
FCKEditor写的很完美,我试图修改了好多次都没有修改成功.
不知道可有人知道用Fckeditor实现如下效果:
开始写内容时就自动保存所写内容,实现Ajax,当提交时自动删除保存的内容
期待中....................
见过别人写的AUTOSAVE,功能如你所述的,但需要与SERVER交叉,做起多用户来麻烦占资源。
所以我觉得用COOKIE可以做
源码 这个按钮不能随意开放,高手写段js代码就可以产生攻击.
不是希望开放代码,而是能不能提示一下,从哪个地方入手来进行修改,加入自定义的按钮。
至于FCKEditor的各种用法我就不在这里一一列举,网上有很多相关的文章,它也自带了不错的sample,可以非常容易加入到我们自己的项目中去。
不过在Ajax应用中如何使用FCKEditor控件呢?这个FCKEditor好像没有提供相应的答案,因为Ajax都是采用的无刷新提交,而FCKEditor只能在Form提交方式下使用,为什么这样说呢,那我们还得从FCKEditor的执行流程说起。
FCKEditor的编辑器实际上是一个IFrame,每次在创建一个FCKEditor实体的时候,都会新建一个IFrame,然后各种toolbar和编辑区都塞到这个IFrame中去了,在IFrame外面必须有一个对应的input元素(这个一般是一个textarea,FCKEditor中称之为LinkedField),这样就可以将textarea中的已有的内容导入到编辑器中,或者将编辑好的内容更新到LinkedField中。那FCKEditor中的内容是何时保存到对应的LinkedField中去的呢?开始我没有看源码,以为是在FCKEditor中的内容发生改变的时候同时更新LinkedField的,后来发现不是,如果是这样的话,那我们就可以很容易在ajax中使用FCKEditor了。那到底是什么时候做到与LinkedField同步的呢?答案肯定是在form执行submit事件之前,要在submit之前做到更新唯一的方式就是通过attachEvent方式将更新的回调函数绑定到onsubmit事件上,然后通过一定的方式在submit之前调用绑定的函数。因此就在FCKEditor提供的核心js文件中查找onsubmit,后来在fckeditorcode_ie.js文件找到了onsubmit关键字(这里不得不提到的一点,FCKEditor虽然做到了开源,但是对于他们的javascript源代码还是有所保留的,里面的很多核心js文件都进行了混淆重排,不过这个也不能怪人家不厚道,为了方便查看源代码,吐血推荐采用MyEclipse的document format功能进行格式化处理,这样基本上可以对里面的结构一目了然了)。
相关代码如下,首先是在FCKEditor初始化的时候:
function FCK_EditingArea_OnLoad() { FCK.EditorWindow = FCK.EditingArea.Window; FCK.EditorDocument = FCK.EditingArea.Document; FCK.InitializeBehaviors(); FCK.OnAfterSetHTML(); if (FCK.Status != FCK_STATUS_NOTLOADED) { return; } FCK.ResetIsDirty(); FCKTools.AttachToLinkedFieldFormSubmit(FCK.UpdateLinkedField); // 开始做绑定 FCK.SetStatus(FCK_STATUS_ACTIVE); }
然后是submit提交前的处理:
FCKTools.AttachToLinkedFieldFormSubmit = function (A) { var B = FCK.LinkedField.form; if (!B) { return; } if (FCKBrowserInfo.IsIE) { B.attachEvent("onsubmit", A); // 将更新处理绑定到form的onsubmit事件上 } else { B.addEventListener("submit", A, false); } if (!B.updateFCKeditor) { B.updateFCKeditor = new Array(); } B.updateFCKeditor[B.updateFCKeditor.length] = A; if (!B.originalSubmit && (typeof (B.submit) == "function" || (!B.submit.tagName && !B.submit.length))) { B.originalSubmit = B.submit; B.submit = FCKTools_SubmitReplacer; } };
真正更新处理代码如下:
FCK.UpdateLinkedField = function () { FCK.LinkedField.value = FCK.GetXHTML(FCKConfig.FormatOutput); // 将FCKEditor编辑的内容取出来,这里是我们关心的重点 FCK.Events.FireEvent("OnAfterLinkedFieldUpdate"); };
OK,大致过程我们基本上已经了解了,至于FCKEditor是如何在执行onsubmit之前执行绑定的更新处理的,暂且不表。
不过这里对FCKEditor的几个对象类需要了解一下,一个是FCKConfig(保存一些相关的配置信息),FCK(取编辑器中编辑的内容需要用到的)。这些类都存活在编辑器所在的IFrame页面之中,在LinkedField所在的页面是无法访问到的。
下面是我们的使用代码,这里是通过js创建FCKEditor实例的方式。
首先定义一个全局的FCKEditor对象:
var oFCKEditor = null;
在页面初始化之后(一般是在body的onload事件中完成)创建oFCKEditor对象
oFCKeditor = new FCKeditor( 'frmEntity_editor_content'/*LinkedField元素id*/, '100%;','400px', 'Default') ; oFCKeditor.BasePath = "${request.getContextPath()}/editor/" ; oFCKeditor.ReplaceTextarea() ;
接下来是在执行ajax请求提交前的处理:
var inputElementId = "frmEntity_editor_content"; // LinkedField元素id var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id var inputElement = eval(inputElementId); inputElement.value = frameElement.window.FCK.GetXHTML(frameElement.window.FCKConfig.FormatOutput); // 取得FCKEditor中的内容同步到LinkedField中去 // 收集提交内容,执行ajax请求 ....
这个就是我的整合过程,其实还是挺简单的,不过碰到一个问题,就是在打开页面之后,输入焦点总是停留在FCKEditor的编辑区里面,而FCKEditor自己提供的例子里面不会出现这个情况,写法也没有什么区别,不知道问题出在哪里,有知道原因的朋友告知一声。
评论
33 楼
kainecy
2007-08-31
谢谢阿
32 楼
macrochen
2007-08-28
kainecy 写道
我明白了FCKeditor被绑定到了From的submit,如果我不用submit按钮的话,该怎么取值呢并像他源码里一样存入相应的域中呢?Request??写一个onclick事件?
最好具体点,我JS懂得不多,谢谢啦
最好具体点,我JS懂得不多,谢谢啦
恩,你得好好补习一下js相关的内容.不用submit就调用form的submit方法是一样的,至于如何把内容存入相关域里面,直接赋值就行了,比如你的form用有一个hidden元素,id为content的,那么在js中这样写content.value=richeditor编辑的内容,Request是后台的对象,所以在脚本中直接给其赋值
31 楼
kainecy
2007-08-25
我明白了FCKeditor被绑定到了From的submit,如果我不用submit按钮的话,该怎么取值呢并像他源码里一样存入相应的域中呢?Request??写一个onclick事件?
最好具体点,我JS懂得不多,谢谢啦
最好具体点,我JS懂得不多,谢谢啦
30 楼
babo
2007-04-27
我在rails里用fckeditor plugin
发现怎么修改fckcustom.js里面的
FCKConfig.ToolbarSets["Simple"] = [
['Source','-','-','Templates'],
['Cut','Copy','Paste','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
'/',
['Image','Table','Rule','Smiley'],
['FontName','FontSize'],
['TextColor','BGColor'],
] ;
这些内容,显示出来的工具条,都没有变化。不知道问题出在哪里?
发现怎么修改fckcustom.js里面的
FCKConfig.ToolbarSets["Simple"] = [
['Source','-','-','Templates'],
['Cut','Copy','Paste','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
'/',
['Image','Table','Rule','Smiley'],
['FontName','FontSize'],
['TextColor','BGColor'],
] ;
这些内容,显示出来的工具条,都没有变化。不知道问题出在哪里?
29 楼
温柔一刀
2007-02-17
帖子的名字有新意
正打算试用这个编辑器了
正打算试用这个编辑器了
28 楼
wking108
2007-02-14
具体是什么问题呢 头上加validateRequest=false了吗
27 楼
macrochen
2007-02-14
wking108 写道
1.熟悉FCKeditor 插件制作
2.熟悉dp.SyntaxHighlighter 实现原理
3.直接"拿"javaeye的 code 插件 一切效果都OK
2.熟悉dp.SyntaxHighlighter 实现原理
3.直接"拿"javaeye的 code 插件 一切效果都OK
看样子楼上的研究很深入啊,你说的这些我都没仔细看过,不过我发现在javaeye中使用fckeditor的时候有个问题,如果我编辑的内容中有html元素,保存之后再显示或者编辑看到的内容都会有问题
26 楼
wking108
2007-02-14
1.熟悉FCKeditor 插件制作
2.熟悉dp.SyntaxHighlighter 实现原理
3.直接"拿"javaeye的 code 插件 一切效果都OK
2.熟悉dp.SyntaxHighlighter 实现原理
3.直接"拿"javaeye的 code 插件 一切效果都OK
25 楼
macrochen
2007-02-12
sp42 写道
macrochen 写道
sp42 写道
请问eval()的用法:
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
噢,我明白了。那如果我用getElemnetby()也是不是相同的效果?
24 楼
sp42
2007-02-11
macrochen 写道
sp42 写道
请问eval()的用法:
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
噢,我明白了。那如果我用getElemnetby()也是不是相同的效果?
23 楼
macrochen
2007-02-11
sp42 写道
请问eval()的用法:
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
看来兄台得恶补一下JavaScript开发指南啊,eval是JS里面的一个非常常用的方法,即将字符串转换成对象,如果去掉了,就会作为字符串来操作,当然调用一些非字符串的方法或者属性的时候就会报undefined的错误了。
22 楼
sp42
2007-02-11
请问eval()的用法:
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
...
var frameElement = eval(inputElementId + "___Frame"); // 用来嵌入FCKEditor的IFrame的id
var inputElement = eval(inputElementId);
...
我去掉eval()后,就出现undefined的错误。
eval在这里有什么作用呢?
21 楼
macrochen
2007-02-10
minimu 写道
那位兄弟有没有Jdk1.1的API文档啊
我把FCK移植到Jdk1.3已经完成了,现在要在1.1下用,发觉没有1.1的API,不知道有没有其他的兄弟有啊?
我把FCK移植到Jdk1.3已经完成了,现在要在1.1下用,发觉没有1.1的API,不知道有没有其他的兄弟有啊?
做这么久Java都没有见过JDK1.1长的什么样儿,更别提API文档了,不过java老巢SUN网站应该有吧?
20 楼
minimu
2007-02-10
那位兄弟有没有Jdk1.1的API文档啊
我把FCK移植到Jdk1.3已经完成了,现在要在1.1下用,发觉没有1.1的API,不知道有没有其他的兄弟有啊?
我把FCK移植到Jdk1.3已经完成了,现在要在1.1下用,发觉没有1.1的API,不知道有没有其他的兄弟有啊?
19 楼
minimu
2007-02-10
对于使用fck,发现JavaEye有点偷懒哈,居然连中文字体都没有加一个
18 楼
zexunlee
2007-02-08
macrochen 写道
zexunlee 写道
不是切换链接。是FCKEditor中的"代码"这个按钮,这个按钮显然不是FCKEditor自带的,而是robbin他们改造了FCKEditor之后增加进去的。我现在就是需要王FCKEditor中增加一个自定义的按钮。
这个功能可以参考image, flash以及table那几个toolbar item的做法来实现,基本原理无非是打开一个dialog,然后输入一些内容,点击“确定”按钮,将输入的内容添加到editor相应的位置。
在_source\internals\fcktoolbaritems.js文件中,我们可以看到如下代码:
case 'Image' : oItem = new FCKToolbarButton( 'Image' , FCKLang.InsertImageLbl, FCKLang.InsertImage, null, false, true, 37 ) ; break ;
因此我们可以参照其做法,添加自己的toolbar item。
在创建toolbar item的js文件_source\internals\fcktoolbarbutton.js文件里面我们会找到下面的代码:
FCKToolbarButton.prototype.Click = function() { var oToolbarButton = this._ToolbarButton || this ; FCK.ToolbarSet.CurrentInstance.Commands.GetCommand( oToolbarButton.CommandName ).Execute() ; }
然后在_source\internals\fckcommands.js找到GetCommand函数,里面包含了创建image的相关command创建过程:
case 'Image' : oCommand = new FCKDialogCommand( 'Image' , FCKLang.DlgImgTitle , 'dialog/fck_image.html' , 450, 400 ) ; break ;
因此我们要创建自己的dialog,也需要在dilaog目录下面创建一个fck_xxx.html的模版文件,参照image的dialog,其主要工作就是如何在点击确定的时候将输入的内容加入到editor中指定的位置,这里我们可以参考editor\dialog\fck_image\fck_image.js文件的代码:
//#### The OK button was hit. function Ok() { if ( GetE('txtUrl').value.length == 0 ) { window.parent.SetSelectedTab( 'Info' ) ; GetE('txtUrl').focus() ; alert( FCKLang.DlgImgAlertUrl ) ; return false ; } var bHasImage = ( oImage != null ) ; if ( bHasImage && bImageButton && oImage.tagName == 'IMG' ) { if ( confirm( 'Do you want to transform the selected image on a image button?' ) ) oImage = null ; } else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' ) { if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) ) oImage = null ; } if ( !bHasImage ) { if ( bImageButton ) { oImage = FCK.EditorDocument.createElement( 'INPUT' ) ; oImage.type = 'image' ; oImage = FCK.InsertElementAndGetIt( oImage ) ; } else oImage = FCK.CreateElement( 'IMG' ) ; } else oEditor.FCKUndo.SaveUndoStep() ; UpdateImage( oImage ) ; var sLnkUrl = GetE('txtLnkUrl').value.trim() ; if ( sLnkUrl.length == 0 ) { if ( oLink ) FCK.ExecuteNamedCommand( 'Unlink' ) ; } else { if ( oLink ) // Modifying an existent link. oLink.href = sLnkUrl ; else // Creating a new link. { if ( !bHasImage ) oEditor.FCKSelection.SelectNode( oImage ) ; oLink = oEditor.FCK.CreateLink( sLnkUrl ) ; if ( !bHasImage ) { oEditor.FCKSelection.SelectNode( oLink ) ; oEditor.FCKSelection.Collapse( false ) ; } } SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ; SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ; } return true ; }
多谢楼主,受益非浅。多交流。
17 楼
macrochen
2007-02-08
zexunlee 写道
不是切换链接。是FCKEditor中的"代码"这个按钮,这个按钮显然不是FCKEditor自带的,而是robbin他们改造了FCKEditor之后增加进去的。我现在就是需要王FCKEditor中增加一个自定义的按钮。
这个功能可以参考image, flash以及table那几个toolbar item的做法来实现,基本原理无非是打开一个dialog,然后输入一些内容,点击“确定”按钮,将输入的内容添加到editor相应的位置。
在_source\internals\fcktoolbaritems.js文件中,我们可以看到如下代码:
case 'Image' : oItem = new FCKToolbarButton( 'Image' , FCKLang.InsertImageLbl, FCKLang.InsertImage, null, false, true, 37 ) ; break ;
因此我们可以参照其做法,添加自己的toolbar item。
在创建toolbar item的js文件_source\internals\fcktoolbarbutton.js文件里面我们会找到下面的代码:
FCKToolbarButton.prototype.Click = function() { var oToolbarButton = this._ToolbarButton || this ; FCK.ToolbarSet.CurrentInstance.Commands.GetCommand( oToolbarButton.CommandName ).Execute() ; }
然后在_source\internals\fckcommands.js找到GetCommand函数,里面包含了创建image的相关command创建过程:
case 'Image' : oCommand = new FCKDialogCommand( 'Image' , FCKLang.DlgImgTitle , 'dialog/fck_image.html' , 450, 400 ) ; break ;
因此我们要创建自己的dialog,也需要在dilaog目录下面创建一个fck_xxx.html的模版文件,参照image的dialog,其主要工作就是如何在点击确定的时候将输入的内容加入到editor中指定的位置,这里我们可以参考editor\dialog\fck_image\fck_image.js文件的代码:
//#### The OK button was hit. function Ok() { if ( GetE('txtUrl').value.length == 0 ) { window.parent.SetSelectedTab( 'Info' ) ; GetE('txtUrl').focus() ; alert( FCKLang.DlgImgAlertUrl ) ; return false ; } var bHasImage = ( oImage != null ) ; if ( bHasImage && bImageButton && oImage.tagName == 'IMG' ) { if ( confirm( 'Do you want to transform the selected image on a image button?' ) ) oImage = null ; } else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' ) { if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) ) oImage = null ; } if ( !bHasImage ) { if ( bImageButton ) { oImage = FCK.EditorDocument.createElement( 'INPUT' ) ; oImage.type = 'image' ; oImage = FCK.InsertElementAndGetIt( oImage ) ; } else oImage = FCK.CreateElement( 'IMG' ) ; } else oEditor.FCKUndo.SaveUndoStep() ; UpdateImage( oImage ) ; var sLnkUrl = GetE('txtLnkUrl').value.trim() ; if ( sLnkUrl.length == 0 ) { if ( oLink ) FCK.ExecuteNamedCommand( 'Unlink' ) ; } else { if ( oLink ) // Modifying an existent link. oLink.href = sLnkUrl ; else // Creating a new link. { if ( !bHasImage ) oEditor.FCKSelection.SelectNode( oImage ) ; oLink = oEditor.FCK.CreateLink( sLnkUrl ) ; if ( !bHasImage ) { oEditor.FCKSelection.SelectNode( oLink ) ; oEditor.FCKSelection.Collapse( false ) ; } } SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ; SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ; } return true ; }
16 楼
macrochen
2007-02-08
sp42 写道
KFCEditor loading太慢,想知道一些优化加速技巧
慢主要是toolbar,所以可以针对toolbar根据需要进行裁剪
如果不需要使用国际化,则只保留中文,具体做法可以google,网上有很多
15 楼
sp42
2007-02-07
ahut9923 写道
macrochen 写道
jackhlp 写道
嗯,FCKeditor确实不错,可以说是在线编辑器中最好的了,我前段时间也在看它,也错了一个像javaeye现在这样的一个插件,感觉很不错,呵呵
希望更多的朋友总结一些使用FCKEditor的经验,呵呵。
我最近一直在用FCKEditor ,感觉还不错.不知道LZ要哪方面的经验呢?
FCKEditor写的很完美,我试图修改了好多次都没有修改成功.
不知道可有人知道用Fckeditor实现如下效果:
开始写内容时就自动保存所写内容,实现Ajax,当提交时自动删除保存的内容
期待中....................
见过别人写的AUTOSAVE,功能如你所述的,但需要与SERVER交叉,做起多用户来麻烦占资源。
所以我觉得用COOKIE可以做
14 楼
zexunlee
2007-02-07
ahut9923 写道
zexunlee 写道
不是切换链接。是FCKEditor中的"代码"这个按钮,这个按钮显然不是FCKEditor自带的,而是robbin他们改造了FCKEditor之后增加进去的。我现在就是需要王FCKEditor中增加一个自定义的按钮。
源码 这个按钮不能随意开放,高手写段js代码就可以产生攻击.
不是希望开放代码,而是能不能提示一下,从哪个地方入手来进行修改,加入自定义的按钮。
发表评论
-
使用JsonEditor开源组件写了一个Json Viewer
2014-07-06 09:06 12311工作中经常要查看一些无格式化的json数据, 下载了几个桌面的 ... -
code review 工具列表
2009-12-19 21:02 59201.代码格式检查checkstyle; ... -
常用正则表达式收集
2008-07-29 22:01 1703from:http://www.cnblogs.com/a31 ... -
用于获取url指定名称参数的js函数
2008-07-27 12:28 1983刚从csdn里面google到的, 笔记一下 functi ... -
用于转换Sql的一个小工具
2008-07-27 12:24 1803因为要在java中写大量的经过格式化后的sql脚本, 于是写了 ... -
REST学习笔记
2008-01-20 18:22 2559把《架构风格与基于网络的软件架构设计》博士论文大致看了一遍, ... -
FCKEditor定制两则
2008-01-20 01:21 2783FCKEditor是一个非常强大 ... -
为Validation.js增加中文日期验证
2008-01-13 00:31 3096还是以前同时发表在ajaxcn.org上的一片小文, 不过后来 ... -
基于prototype.js验证框架(validation.js)的三个应用
2008-01-13 00:24 2522也是很早发在ajaxcn.org上的一片文章, 现在proto ... -
本人对prototype.js进行的扩展
2008-01-13 00:06 1819很老的帖子了, 发在ajaxcn.org上,贴到这里,以后查找 ... -
对页面右键菜单, 选择屏蔽的屏蔽
2007-12-23 20:42 1836在浏览器地址栏中输入: javascript:void(win ... -
一个Ajax集成开发框架的布局重构之路
2007-02-08 14:22 3133发表于《程序员》2006年12期 一、背景介绍 随着web标准 ... -
Ajax一统天下之Dojo整合篇
2006-11-19 16:16 21370随着Ajax应用越来越多, ... -
Comet,下一代Ajax?
2006-10-23 23:57 40376最近在看comet(server ...
相关推荐
在Ajax应用场景中,由于Ajax技术的无刷新提交特性,直接使用FCKEditor变得有些复杂。因为FCKEditor的设计是基于表单提交的,它需要在表单提交前将编辑器中的内容同步到LinkedField中。这需要通过JavaScript在...
### Ajax一统天下之Dojo整合篇 #### 一、引言 随着Web技术的不断发展,Ajax技术的应用越来越广泛,为了提高用户体验,开发者们不断探索更高效、更灵活的前端框架和技术栈。在这个过程中,出现了多种多样的Ajax库、...
Eclipse Rich Ajax Platform: Bringing Rich Client to the Web Paperback: 148 pages Publisher: Apress; 1 edition (December 29, 2008) Language: English ISBN-10: 1430218835 ISBN-13: 978-1430218838 ...
Properties Editor 编辑java的属性文件,并可以自动存盘为Unicode格式 也可以从下面地址下载: http://propedit.sourceforge.jp/index_en.html
Struts2.0和AJAX的整合是Web开发中常用的技术组合,主要用于构建动态、交互性强的Web应用程序。Struts2作为MVC框架,提供了一种组织应用逻辑和视图的有效方式,而AJAX(Asynchronous JavaScript and XML)则允许在不...
《The Rich Ajax Platform》是一篇关于如何利用Eclipse RAP(Rich Ajax Platform)技术来构建下一代Web 2.0应用程序的文章。这篇文章由Ralf Sternberg和Benjamin Muskalla撰写,并在2007年9月26日发布。该文详细介绍...
"AJAX与图书馆信息整合.pdf" AJAX(Asynchronous JavaScript and XML)技术是近年来逐渐兴起的一种Web开发技术,它的特点使得利用AJAX技术的整合方案成为解决图书馆信息整合的一个途径。本文将介绍AJAX技术在图书馆...
Eclipse Rich Ajax Platform(简称RAP)是Eclipse基金会推出的一个开源项目,旨在为开发者提供一个构建富客户端Web应用的框架,特别强调了Ajax技术的使用。RAP基于Java,利用Eclipse插件系统的强大功能,使得开发...
AJAX、JSF和EJB的整合主要体现在以下方面: 1. **前端交互增强**:通过AJAX,JSF的用户界面可以实现动态更新,无需每次操作都重新加载整个页面。例如,用户填写表单时,可以使用AJAX实时验证输入的有效性,而无需...
### Pro JSF and Ajax: Building Rich Internet Components #### 概述 《Pro JSF and Ajax: Building Rich Internet Components》是一本深入探讨JavaServer Faces(JSF)与Ajax技术结合使用的专业书籍,旨在帮助...
传统的Web表单提交方式已无法满足这些需求,因此Ajax技术逐渐成为提升用户体验的重要手段之一。本文将详细介绍如何在Struts2框架中整合jQuery来实现Ajax功能,并通过具体示例来展示这一过程。 #### 二、基础知识...
综上所述,"ajax、Struts、spring整合工程"是一个展示如何在Java Web开发中将这三个关键技术有效结合的实际案例。通过这样的整合,开发者可以构建出用户体验更好、代码结构更清晰、可维护性更强的Web应用。
本书是《基于J2EE的Ajax宝典》的第二版part3。《基于J2EE的Ajax宝典》面市近2年,作为Ajax领域最全面、实用的图书,一直深受读者的好评
总结来说,Struts2整合jQuery实现Ajax功能,可以让前端和后端之间进行无缝通信,提供更加动态的用户体验。通过使用jQuery简化Ajax操作,开发者可以专注于业务逻辑而不是繁琐的异步请求处理。同时,Struts2的Action...
【Ajax+Spring+Hibernate整合项目详解】 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,...
Apache Shiro 和 AJAX 的整合是现代 Web 应用程序中常见的需求,特别是在使用 Spring(SSH 框架的一部分)开发企业级应用时。Shiro 是一个强大且易用的 Java 安全框架,提供了身份验证、授权、会话管理和加密等功能...