CKEditor4.0版本上传完图片之后,如何触发image.js的onChange事件?

Snakecn21 发布于 2012/12/13 18:27
阅读 5K+
收藏 0

在网上看了大量的资料,以及自己慢慢摸索,终于使用CKEditor+uploadify插件组成了CKEditor的上传功能。

刚打开CKEditor页面:

点击上传图片功能的弹出图:

使用uploadify写的上传页面:

上传完成后的效果,注意传的两个值的对应关系:

注意问题来了,我现在两个值都能够正常的传过去了,但是预览框确实没有显示出图片,但是你点击绿色的那个'确定'按钮,CKEditor确实能够正常显示图片的。

加载中
0
Snakecn21
Snakecn21

接上面

点击绿色的'确定'按钮之后,界面的显示图如下:


但是我真正想要的效果是这样:


现在我把一部分代码贴上来

其中最关键的是这一句:
window.opener.document.getElementById(txtUrlId).value = obj.returnImagePath;

obj.returnImagePath的值是:http://localhost:端口号/项目名/图片上传文件夹/图片文件名.png

这一句的用处就是后台将上传好的文件地址返回回来,然后前台取到这个值(obj.returnImagePath)并把它写入到info的txtUrl(源代码)框中去。

不过现在 有一个很让我烦恼的问题出现了,就是我传了这个值过去之后,发现无法触发txtUrl自身的onChange事件。也就是说上传页面返回了图片的url地址之后,预览框不会显示你刚刚上传的图片,但是你点击确定之后,在CKEditor中是可以正常显示你上传的图片的。

所以说我现在的效果在功能上是没有问题的,就是在用户体验上面会有点不太友好,求解决办法!

0
pooy
pooy

没必要做成两个页面!

自己给自己找麻烦。

0
pooy
pooy

关于jquery uploadify 参数问题请移步:《Uploadify与php使用详解 》。

关于jquery uploadify 动态传值问题请移步:《jquery.uploadify动态传递表单元素

 关于jquery uploadify 后台处理问题请移步:《uploadify 后台处理

0
MissShq
MissShq
求此功能的代码。。能发邮箱吗 大哥。。。772913966  qq的邮箱。。。
0
pumpkin555
pumpkin555
楼主 我也遇到了同样的问题,可以上传但是无法预览,不知道你有没好的解决办法。
0
路峰
路峰

求楼主样例代码

修改源码后怎么打包文件啊?

0
pumpkin555
pumpkin555

楼主预览的问题 我大概解决了:

每个预览框里面都会有一个如下图的超链接:

你只要把生成的图片地址付赋值给它就行了

img 标签是通过jquery 选择器拿到的,因为标签的的id是自动生成的,不能直接拿:

window.top.$j(".ImagePreviewBox:visible").find("img");

返回顶部
顶部