怎样用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 (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-03-03 11:13 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接: