免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項超值服

開通VIP
Extjs portal 初探 - textarea 與 pre
 
很久沒用過 ,textarea 了,一般就是用用  htmleditor 這種控件 ,而今次的動畫編輯,要在web client 編輯資源文字,而資源文字要用在不能顯示html的地方,如彩信 ,于是就用 textarea 了 ,另外要做一個 預(yù)覽 各個幀的界面 ,結(jié)果遇到了不少問題。

 

 

 

 

 

 

 

 

1.textarea 編輯后 提交到服務(wù)器 ,服務(wù)器確認(rèn)后再傳回,里面的  < > 已被 extjs 自動編碼為 < >

 

Js代碼
  1. frame_edit.form.submit({   
  2.                             url : 'setFrame.jsp',   
  3.                             success : function(form, action) {   
  4. //  textResourceText 輸 < ,服務(wù)器傳過來 <   //action.result.data.textResourceText變成 <        
  5.  //需要自己    Ext.util.Format.htmlDecode                                  
  6. action.result.data.textResourceText=Ext.util.Format.htmlDecode(   
  7. action.result.data.textResourceText);   
  8.                                    2.textarea 輸入的內(nèi)容 換行空格等要在 web 上 原樣顯示 ,有兩個方法

 

 

    1. 運(yùn)用 pre 標(biāo)簽 (老式的html標(biāo)簽,但是具有廣泛的兼容性) ,將 textarea 輸入的內(nèi)容 放在 <pre> </pre> 中間  ,但這樣的話 換行只有在 textarea 輸入的內(nèi)容 換行的時候才會換行 ,不會隨屏幕寬度自動換行。

 

     2.css 指定 white-space:pre   如 <p style="white-space:pre;"></p>  ,但是ie6 及其以下版本不支持

 

     3.replace(/\n/g,'<br/>').replace(/\s/g,' ') 一方面 換行在 textarea 輸入的內(nèi)容 換行的時候會換行 ,另一方面 會隨屏幕寬度自動換行。 但是若指定寬度,并且遇到了長英文字符,如  email:yiminghe@xxxxxxxxxxx.com 則橫向滾動條又會出現(xiàn)了。解決方法:

             3.1 : 在 IE 和 Safari 1.3+ 下相對比較容易解決,使用 CSS 屬性 word-wrap: break-word;。

             3.2 : 而 Firefox 和 Opera 瀏覽器 ,無法識別 word-wrap: break-word; 和 word-break:break-all; 屬性。可以通過腳本給連續(xù)字符的每個字符之間插入 \ u8203 的字符(該字符在非 IE 瀏覽下不占據(jù)空間) ,使連續(xù)變?yōu)榱瞬贿B續(xù),達(dá)到了換行的效果。

Js代碼
  1. breakWord = function(dEl){   
  2.     var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, nullfalse);   
  3.     var node,s,c = String.fromCharCode('8203');   
  4.     while (dWalker.nextNode()){   
  5.         node = dWalker.currentNode;   
  6.         s = trim( node.nodeValue ) .split('').join(c);   
  7.         node.nodeValue = s;   
  8.     }   
  9.     return true;   
  10. }   

     上述3個方法  都要先將 < ,> ," ,& 轉(zhuǎn)義 ,用 Ext.util.Format.htmlEncode 即可

綜合來說 ,還是不如 htmleditor 方便 ,做web開發(fā)確實還是 能用 htmleditor就用 htmleditor,更好就用 fckeditor 了

 

 

附錄 :http://www.hedgerwow.com/360/dhtml/css-word-break.html

 

Js代碼
  1. function breakWord(dEl){   
  2.            
  3.            
  4.         if(!dEl || dEl.nodeType !== 1){   
  5.              
  6.           return false;   
  7.            
  8.         } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){   
  9.              
  10.           //Lazy Function Definition Pattern, Peter's Blog   
  11.           //From http://peter.michaux.ca/article/3556   
  12.              
  13.           breakWord = function(dEl){   
  14.             //For Internet Explorer   
  15.             dEl.runtimeStyle.wordBreak = 'break-all';   
  16.             return true;   
  17.           }   
  18.              
  19.           return breakWord(dEl);   
  20.             
  21.         }else if(document.createTreeWalker){   
  22.           
  23.           //Faster Trim in Javascript, Flagrant Badassery   
  24.           //http://blog.stevenlevithan.com/archives/faster-trim-javascript   
  25.              
  26.           var trim = function  (str) {   
  27.             str = str.replace(/^\s\s*/, '');   
  28.             var ws = /\s/,   
  29.             i = str.length;   
  30.             while (ws.test(str.charAt(--i)));   
  31.             return str.slice(0, i + 1);   
  32.           }   
  33.              
  34.           //Lazy Function Definition Pattern, Peter's Blog   
  35.           //From http://peter.michaux.ca/article/3556   
  36.              
  37.           breakWord = function(dEl){   
  38.                
  39.             //For Opera, Safari, and Firefox   
  40.             var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, nullfalse);   
  41.             var node,s,c = String.fromCharCode('8203');   
  42.             while (dWalker.nextNode())   
  43.             {   
  44.               node = dWalker.currentNode;   
  45.               //we need to trim String otherwise Firefox will display    
  46.               //incorect text-indent with space characters   
  47.               s = trim( node.nodeValue ) .split('').join(c);   
  48.               node.nodeValue = s;   
  49.             }   
  50.             return true;   
  51.           }   
  52.              
  53.           return breakWord(dEl);   
  54.              
  55.              
  56.         }else{   
  57.           return false;   
  58.         }   
  59.       }  

 

  (#)

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
javascript – 如何刪除動態(tài)創(chuàng)建的div?
EXTJS GridPanel 右鍵復(fù)制當(dāng)前選中單元格
jquery正則表達(dá)式驗證(手機(jī)號、身份證號、中文名稱)
如何使textarea 顯示行號
前端:分享一些實用的JS代碼片段
jQuery拖拽布局插件Portal
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服