.........net by ddr888
Email: erickdu888#gmail.com
博客园
社区
首页
新随笔
联系
管理
订阅
随笔- 91 文章- 1 评论- 253
怎样用javascript操作ftb编辑区内容
想法源于freetextbox的使用过程。
在我用ftb时,很想在客户端用js对ftb的编辑框进行操作,在使用ftb的页面中查看了dom树,发现ftb服务器端控件给客户端发过来的只有三个div,分别对应 :编辑模式,html模式和预览模式(仅限于编辑区)代码如下:
1
<
div
id
="content_designEditorArea"
style
="clear:both;padding-top:1px;"
>
2
<
iframe
id
="content_designEditor"
style
="padding: 0px; width:598px; height: 349px;"
src
="about:blank"
class
="content_DesignBox"
></
iframe
>
3
</
div
>
4
<
div
id
="content_htmlEditorArea"
style
="clear:both;display:none;padding-bottom:1px;"
>
5
<
textarea
id
="content"
name
="content"
disabled
="disabled"
style
="padding: 0px; width:600px; height: 350px;"
class
="content_HtmlBox"
>
3
</
textarea
>
6
</
div
>
7
<
div
id
="content_previewPaneArea"
style
="clear:both;display:none;padding-bottom:1px;"
>
8
<
iframe
id
="content_previewPane"
style
="padding: 0px; width:598px; height: 349px"
src
="about:blank"
class
="content_DesignBox"
></
iframe
>
9
</
div
>
看到代码,我很高兴,因为有比较熟悉的id为content的textarea,思路马上清晰了,直接用js往textarea的innerText属性加内容就可以了不是(你真是太有才了)。
马上行动,代码如下:
content.innerText
=
value;
结果很令我意外,我发现我能看到的ftb编辑区依然空空荡荡,又查dom树,发现content也就是html模式下的编辑区的确已经有了我需要的内容,可是回到普通编辑模式后,不但普通编辑模式没有内容,连html模式的编辑框里的内容也被删了;换个思路,我在普通编辑区手动打入内容,问题发现了,每当我在普通编辑区打入一个字,通过dom树我看到html编辑模式下的区域也跟着改变一下,而我在html模式下编辑时,普通模式的编辑区是不会跟着改变的,这就是为什么改了html模式下的内容,调整回普通编辑模式时内容消失的原因。
既然问题找到,看来要换换思路了---对普通编辑模式下的id为
content_htmlEditorArea的iframe进行处理了,进行的很顺利,问题解决了,代码如下:
content_designEditor.document.body.innerHTML
=
value;
上面的代码告诉我们一个页面里的iframe,不论它的src有没有值,它都相当与一个新的document。
posted @ 2007-03-03 11:11
ddr888
阅读(2415)
评论(12)
编辑
收藏
所属分类:
javascript代码
、
AJAX
发表评论
回复
引用
查看
#1楼
2007-03-03 12:25 |
reonlyrun
不错,你太有才了
回复
引用
查看
#2楼
[
楼主
]2007-03-03 13:55 |
ddr888
@reonlyrun
:)
回复
引用
查看
#3楼
2007-03-03 14:05 |
金色海洋(jyk)
是呀是呀。
回复
引用
查看
#4楼
[
楼主
]2007-03-03 17:10 |
ddr888
onchange=TravelPlan(this.options[this.selectedIndex].text)
回复
引用
查看
#5楼
[
楼主
]2007-03-05 09:06 |
ddr888
@兰亭
我没用过fck editor,用法和ftb一样么?
回复
引用
查看
#6楼
2007-03-05 09:19 |
兰亭
晕,看错啦^o^
回复
引用
查看
#7楼
[
楼主
]2007-03-05 09:21 |
ddr888
@兰亭
木关系, 你说fck用起来和ftb一样方便么, ftb有太多限制了。不知道fck是不是也限制好多功能呢?
回复
引用
查看
#8楼
2007-03-05 09:25 |
兰亭
ftb没用过,刚才找了一下,它也有现成的javascript客户端函数可用。
GetHtml()
Returns the HTML currently in the editor.
FTB_API['FreeTextBox1'].GetHtml();
SetHtml(html)
Sets the HTML in the editor
FTB_API['FreeTextBox1'].SetHtml("some new HTML with a table: <table><tr><td>(0, 0)</td><td>(0, 1)</td></tr><tr><td>(1, 0)</td><td>(1, 1)</td></tr></table>");
这个可能对你有所帮助^-^:
http://wiki.freetextbox.com/default.aspx/FreeTextBoxWiki.MajorFreeTextBoxJavaScriptFunctions
回复
引用
查看
#9楼
2007-03-05 09:28 |
兰亭
fck是免费的,功能没有限制,我现在就是用它。你可以看一下它的DEMO与ftb对比一下:
http://www.fckeditor.net/demo
这些编辑器功能都差不多,能用免费开源的,就不想考虑收费的啦
回复
引用
查看
#10楼
[
楼主
]2007-03-05 10:08 |
ddr888
@兰亭
谢谢 真的很有用 我也考虑用一下fck
有它的使用介绍么?
回复
引用
查看
#11楼
2007-03-05 10:41 |
兰亭
在博客园中关于它的文章挺多的,你搜一下就可以了
回复
引用
查看
#12楼
[
楼主
]
2007-03-05 10:46 |
ddr888
@兰亭
的确不错 项目开源 技术支持收费 :)
新用户注册
刷新评论列表
标题
姓名
主页
Email
(博主才能看到)
验证码
*
看不清,换一张
[
登录
][
注册
]
内容(请不要发表任何与政治相关的内容)
网站首页
新闻频道
社区
小组
博问
网摘
闪存
找找看
Remember Me?
登录
使用高级评论
新用户注册
返回页首
恢复上次提交
[使用Ctrl+Enter键可以直接提交]
该文被作者在 2007-03-03 11:13 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索
相关文章:
javascript小技巧
用javascript操作xml
相关链接:
所属分类的其他文章:
类似google拖拽效果的原理实现(来自codeproject)
怎样用javascript操作ftb编辑区内容
图片滚动代码。
javascript常用脚本集锦
下拉列表控制文本框的个数思路
js提取url参数的几种方法。(搜集)
js实现弹出式菜单
js客户端日历控件
freetextbox常用ToolbarLayout按钮功能(3.1.6)
图片缩放js
最新IT新闻:
MySpace推自助广告平台MyAds
Facebook创始人:信息共享或存摩尔定律
微软承认Vista用户账户控制功能有问题
资本寒冬侵袭中国视频网站 营销春天或不远
金融风暴波及全球创业板 中国概念股难独善其身
公告
站长统计
我的最新闪存
拒绝工作
10-7 09:44
<
2007年3月
>
日
一
二
三
四
五
六
25
26
27
28
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
与我联系
发短消息
搜索
常用链接
我的随笔
我的空间
我的短信
我的评论
更多链接
我的参与
我的新闻
最新评论
我的标签
留言簿
给我留言
查看留言
我管理的小组
灌水号
我参加的小组
web标准设计
创业交流
jQuery
我参与的团队
ASP.NET AJAX (Atlas)学习(0/1352)
昆明.NET俱乐部(0/116)
我的标签
subsonic(1)
随笔分类
(124)
AJAX(6)
(rss)
asp.net(37)
(rss)
css+xhtml(5)
(rss)
flash动画(3)
(rss)
html(6)
(rss)
javascript代码(14)
(rss)
扯淡淡(13)
(rss)
技术疑问(20)
(rss)
技术原创(3)
(rss)
数据库(7)
(rss)
项目日志(10)
(rss)
随笔档案
(91)
2008年10月 (1)
2008年5月 (1)
2008年4月 (1)
2008年3月 (1)
2007年11月 (1)
2007年10月 (1)
2007年9月 (2)
2007年8月 (1)
2007年7月 (3)
2007年6月 (3)
2007年5月 (2)
2007年3月 (5)
2007年2月 (4)
2007年1月 (13)
2006年12月 (22)
2006年11月 (13)
2006年10月 (17)
文章分类
(1)
项目日志(1)
(rss)
收藏夹
(2)
asp.net(2)
(rss)
asp.net
ddr888-asp.net
电子商务
破烂网
音乐娱乐
it产品
激光教鞭是什么?
积分与排名
积分 - 89597
排名 - 446
阅读排行榜
1. 双边可关闭对联广告!(5519)
2. 有人装vs2005的sp1补丁出问题的嚒?(5279)
3. 图片滚动代码。(4597)
4. 【META http-equiv="Content-Type" Content="text/html; Charset=*】意义详解(3664)
5. js客户端日历控件(2548)
评论排行榜
1. 有人装vs2005的sp1补丁出问题的嚒?(25)
2. 送wallop 邀请 剩的不多,一天就5个(22)
3. 图片滚动代码。(17)
4. Asp.Net 学习资源列表(15)
5. gridview中实现客户端“删除确认”?(13)