很久沒用過 ,textarea 了,一般就是用用 htmleditor 這種控件 ,而今次的動畫編輯,要在web client 編輯資源文字,而資源文字要用在不能顯示html的地方,如彩信 ,于是就用 textarea 了 ,另外要做一個 預(yù)覽 各個幀的界面 ,結(jié)果遇到了不少問題。
1.textarea 編輯后 提交到服務(wù)器 ,服務(wù)器確認(rèn)后再傳回,里面的 < > 已被 extjs 自動編碼為 < >
- frame_edit.form.submit({
- url : 'setFrame.jsp',
- success : function(form, action) {
-
-
- action.result.data.textResourceText=Ext.util.Format.htmlDecode(
- action.result.data.textResourceText);
-
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á)到了換行的效果。
- breakWord = function(dEl){
- var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
- var node,s,c = String.fromCharCode('8203');
- while (dWalker.nextNode()){
- node = dWalker.currentNode;
- s = trim( node.nodeValue ) .split('').join(c);
- node.nodeValue = s;
- }
- return true;
- }
上述3個方法 都要先將 < ,> ," ,& 轉(zhuǎn)義 ,用 Ext.util.Format.htmlEncode 即可
綜合來說 ,還是不如 htmleditor 方便 ,做web開發(fā)確實還是 能用 htmleditor就用 htmleditor,更好就用 fckeditor 了
附錄 :http://www.hedgerwow.com/360/dhtml/css-word-break.html
- function breakWord(dEl){
-
-
- if(!dEl || dEl.nodeType !== 1){
-
- return false;
-
- } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === 'string'){
-
-
-
-
- breakWord = function(dEl){
-
- dEl.runtimeStyle.wordBreak = 'break-all';
- return true;
- }
-
- return breakWord(dEl);
-
- }else if(document.createTreeWalker){
-
-
-
-
- var trim = function (str) {
- str = str.replace(/^\s\s*/, '');
- var ws = /\s/,
- i = str.length;
- while (ws.test(str.charAt(--i)));
- return str.slice(0, i + 1);
- }
-
-
-
-
- breakWord = function(dEl){
-
-
- var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
- var node,s,c = String.fromCharCode('8203');
- while (dWalker.nextNode())
- {
- node = dWalker.currentNode;
-
-
- s = trim( node.nodeValue ) .split('').join(c);
- node.nodeValue = s;
- }
- return true;
- }
-
- return breakWord(dEl);
-
-
- }else{
- return false;
- }
- }