原文网址:http://www.blogwind.com/Wuvist/comment.aspx?Article_id=5421

作者:Wuvist

转载者请注明原文出处以及我的名字,谢谢……倘若,您需要使用到文中的javascript函数,亦请保留函数名称。

FreeTextBox应该是应用最广泛的免费asp.net控件之一了……

FreeTextBox Team把FTB称为:“The no.1 free ASP.NET HTML Editor for IE and Mozilla. ”说得可是一点都没有错……


我从去年12月开始做博客风的时候,便使用了FTB 1.6.3破宝汉化版作为后台编辑器。这个版本的FTB,应该是在国内流传最广的版本……


FTB的最大优点是将文本处理都采用JavaScript来处理,避免了asp.net控件时常需要将页面postback的弊病。个人感觉,是有可以将FTB生成的静态页面保存下来,然后将其当作纯xhtml的在不支持asp.net的服务器中使用,只是,工程很大,似乎也没有任何程序员想做这么件事情……毕竟,还有htmlarea等东西存在。

在那个时候,FTB是开源的,并且功能已经足够强大……唯一的遗憾是1.X版本的FTB并不支持Mozilla……我在将其加入博客系统中的时候,也自己添加表情代码风格、图片插入功能,虽然有FTB的源码,但是从使用的角度来说,我不认为在扩展FTB功能的时候应该去修改其c#代码……直接编写新的javascript会灵活很多……我当时使用的是类似:

关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西function Wuvist_code(ftbName) { 
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
if (FTB_IsHtmlMode(ftbName)) return;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        editor 
= FTB_GetIFrame(ftbName);
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
var range = editor.document.selection.createRange();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
var RangeType = editor.document.selection.type;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
if ( RangeType == "Text" )
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            range.execCommand(
"RemoveFormat");
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            
var rangeText = range.htmlText;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            range.pasteHTML('
<PRE style="font-size:90%;font-family:\'courier new\',courier,serif;line-height:1em;background:#EEEEEE;margin-top:1em; margin-bottom:1em; margin-left:0px;padding:5pt;">'+rangeText+'</PRE>');
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        }
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
else if ( RangeType == "None" )
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            alert(
"你没有选择任何东西,无法完成此功能!");
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        }
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
else
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            alert(
"选择部分中,存在控件,无法进行指定的文本格式化!!");
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        }
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西}

的JavaScript来实现的。

从FTB 2.0开始,便支持Mozilla了……好像,只有FTB这一个编辑器可以支持Mozilla……FreeTextBox Team的html/css/javascript的功力实在是强……2.X版本的FTB对于javascript的调用做了大幅度修改……看得出来,相对起1.X版本javascript代码进步了很多……

不过,FTB 2.0开始对源码收费,而且,免费版本只有最基本的编辑功能可以使用,像“清楚word格式”、“统计字数”等得编辑功能都消失了……(不过,我也不清楚是不是我这个白痴不会把他们调用出来……)

因为FTB1.X的图片上传、插入、管理页面存在安全隐患,2.X取消了……不过,它内置的图片插入按钮实在让人窝火……明明就不支持图片上传,为什么要放一个浏览的功能键呢???无数用户以为它可以上传图片,在用户本机上,图片的浏览效果也很好……可惜,也就只有用户本人可以看到而已……

其实,在FTB2.X里面也是可以调用1.X的那个图片管理文件ftb.imagegallery.aspx。我采用的是类似:
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西function Wuvist_image() {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
if (FTB_IsHtmlMode('WTB1')) return;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    editor 
= FTB_GetIFrame('WTB1');
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    editor.focus();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
var folder = '<%=用户图片目录名%>';
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
var galleryscript = '/ftb.imagegallery.aspx?rif='+folder+'&cif='+folder;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
if (isIE) {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            imgArr 
= showModalDialog(galleryscript,window,'dialogWidth:560px; dialogHeight:500px;help:0;status:0;resizeable:1;');
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            
if (imgArr != null) {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西                imagestring 
= '<IMG SRC="' + imgArr['filename'] + '" HEIGHT=+ imgArr['height'] + ' WIDTH=+ imgArr['width'] + ' BORDER=0>';
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西                sel 
= editor.document.selection.createRange();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西                sel.pasteHTML(imagestring);
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            }
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    } 
else {        
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        alert(
"图片上传功能限只支持IE。");
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    }
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西}

来实现。而插入表情的代码则类似:

关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西function Wuvist_emots(emot) { 
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
if (FTB_IsHtmlMode('WTB1')) return;
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西   

关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西
    editor = FTB_GetIFrame('WTB1');
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    editor.focus();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    
if (isIE) {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
var range = editor.document.selection.createRange();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        range.pasteHTML(
"<IMG  src='images/emot/"+emot+".gif' border=0>");
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    } 
else {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        selection 
= editor.window.getSelection();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        editor.focus();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
if (selection) {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            range 
= selection.getRangeAt(0);
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        } 
else {
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西            range 
= editor.document.createRange();
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        } 
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        FTB_InsertText('WTB1',
"<IMG  src='images/emot/"+emot+".gif' border=0>");        
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    }    
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西}

同样的,也可以自己做出“清除word格式”、“统计字数”等等按钮。因为没有FTB源码,自己弄出来的这些新按钮,只能放在FTB编辑器外边,不过,这个应该不是一个大问题吧……我也是比较喜欢通过用纯javacript来实现新功能。

我使用的是FTB 2.0.7版……这个版本的FTB在parse html的时候,似乎有错误……用户在插入类似:
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西<EMBED src=http://www.blogwind.com/music.mp3 width=375 height=47 type=audio loop="1" autostart="false" controls="ControlPanel,StatusBar" console="Clip1"></EMBED>
的HTML的时候,它经常把“src=http”后面的URL自动去掉……

看的时候可以看到,但是提交后,ftb.text就已把http后的内容干掉了……不知道是哪里的bug……博客园使用的FTB亦有这个问题!

我能够想到的解决办法就是升级到3.0版的FTB,3.0版本也添加了Mac风格,很可爱……

不过,原来发布的FTB 3.0 RC版实在是一个令人失望的版本……好端端的为什么要将所有的javascript/图片整合到dll里面呢?慢……虽然可以选择external source……但是,它并没有提供Mac风格的外部文件……同样的……它也是bug多多……

终于……FreeTextBox Team在12/09/2004发表了新的3.0版……可以完全使用external javascirpt/image……新的图片管理文件ftb.imagegallery.aspx亦非常好用……看其javascript代码,明显由再次做了优化,又简洁了很多……不过,要自己弄添加表情按钮javascipt又得做调整,我写出来的函数类似:
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西function Wuvist_emot(number) { 
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    ftb 
= 'WTB1';关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    img 
= '<IMG  src="images/emot/'+number+'.gif" border=0>';关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西        
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西    window.parent.FTB_API[ftb].InsertHtml(img);
关于FreeTextBox 1.63/2.0.7/3.0RC/3.0的一些东西}

呵呵……真的简洁很多……

关于FTB 3.0,偶其实还发现了另一个很“关键”的东西……不过,出于对FreeTextBox Team版权的尊重,偶就不写出来了……也许,FreeTextBox Team是故意留下来这样的“后门”吧……反正,也是很简单的事情,大家有兴趣不妨自己研究……偶在博客风中使用了这一技巧……

相关文章:

  • 2022-01-14
  • 2021-07-09
  • 2021-10-31
  • 2022-01-07
  • 2021-06-25
  • 2021-08-15
  • 2022-12-23
猜你喜欢
  • 2021-09-15
  • 2021-09-10
  • 2021-12-27
  • 2022-12-23
  • 2022-12-23
  • 2021-07-22
  • 2021-06-21
相关资源
相似解决方案