长字串换行问题

最新推荐文章于 2024-12-25 08:52:23 发布

原创最新推荐文章于 2024-12-25 08:52:23 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #Firefox #IE #CSS #Safari

extjs 专栏收录该内容

26 篇文章

订阅专栏

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

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

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,' ') 一方面换行在 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;
        }
      }