长字串换行问题

  很久没用过 ，textarea 了，一般就是用用  htmleditor 这种控件 ，而这次的动画编辑，要在web client 编辑资源文字，而资源文字要用在不能显示html的地方，如彩信 ，于是就用 textarea 了 ，另外要做一个 预览 各个帧的界面 ，结果遇到了不少问题。

 

 

 

 

 

 

 

 

1.textarea 编辑后 提交到服务器 ，服务器确认后再传回，里面的  < > 已被 extjs 自动编码为 &lt; &gt;

 

frame_edit.form.submit({
                            url : 'setFrame.jsp',
                            success : function(form, action) {
//  textResourceText 输 < ，服务器传过来 <   //action.result.data.textResourceText变成 &lt;   	
 //需要自己    Ext.util.Format.htmlDecode                        		
action.result.data.textResourceText=Ext.util.Format.htmlDecode(
action.result.data.textResourceText);
                                

 

 

2.textarea 输入的内容 换行空格等要在 web 上 原样显示 ，有两个方法

 

 

      1. 运用 pre 标签 (老式的html标签，但是具有广泛的兼容性) ， 将 textarea 输入的内容 放在 <pre> </pre> 中间  ,但这样的话 换行只有在 textarea 输入的内容 换行的时候才会换行 ，不会随屏幕宽度自动换行。

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

     3.replace(/\n/g,'<br/>').replace(/\s/g,'&nbsp;') 一方面 换行在 textarea 输入的内容 换行的时候会换行 ,另一方面 会随屏幕宽度自动换行。 但是若指定宽度，并且遇到了长英文字符，如  email：yiminghe@xxxxxxxxxxx.com 则横向滚动条又会出现了。

 

 

 

     上述3个方法  都要先将 < ,> ," ,& 转义 ，用 Ext.util.Format.htmlEncode 即可

3 换行问题：

             3.1 : 在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word; word-break:break-all; 。

             3.2 : 而 Firefox 和 Opera 浏览器 ，无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间 插入 \u8203 的字符（该字符在非 IE 浏览下不占据空间）或者 <wbr/>建议换行标签 ，使连续变为了不连续，达到了换行的效果。

 

扩展一下 (2009-11-25 写了简洁版本：)

 

允许指定超过了多少字长添加建议换行标志

 

/**
*每count长字串间加入<wbr/>建议换行标志
*@param str {string} 长字串
*@param count {int} 
*@return {string} 加好建议换行标志的字符串
*/
function breadWord(str,count) {
	//超过count需要换行的英文符号，不包括, .等标点
	var matchRe=new RegExp("[a-zA-Z!@#$%^&*_+=\\-]{"+count+",}","g");
	var sRe=new RegExp(".{"+count+"}|(?:.{1,"+count+"}$)","g");
	return str.replace(matchRe,function(m){
		return m.match(sRe).join("<wbr/>");
	})
}

alert(breadWord("yiminghe@xxxx.xxxxx.xxxxx-cn",5))

 

 

 

 

 

 

综合来说 ，还是不如 htmleditor 方便 ，文本编辑确实还是能用 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'){
          
          //Lazy Function Definition Pattern, Peter's Blog
          //From http://peter.michaux.ca/article/3556
          
          breakWord = function(dEl){
            //For Internet Explorer
            dEl.runtimeStyle.wordBreak = 'break-all';
            return true;
          }
          
          return breakWord(dEl);
         
        }else if(document.createTreeWalker){
       
          //Faster Trim in Javascript, Flagrant Badassery
          //http://blog.stevenlevithan.com/archives/faster-trim-javascript
          
          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);
          }
          
          //Lazy Function Definition Pattern, Peter's Blog
          //From http://peter.michaux.ca/article/3556
          
          breakWord = function(dEl){
            
            //For Opera, Safari, and Firefox
            var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
            var node,s,c = String.fromCharCode('8203');
            while (dWalker.nextNode())
            {
              node = dWalker.currentNode;
              //we need to trim String otherwise Firefox will display 
              //incorect text-indent with space characters
              s = trim( node.nodeValue ) .split('').join(c);
              node.nodeValue = s;
            }
            return true;
          }
          
          return breakWord(dEl);
          
          
        }else{
          return false;
        }
      }