Extjs portal 初探 - textarea 与 pre

http://yiminghe./blog/341225

 

很久没用过 ，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变成 <
 //需要自己    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 及其以下版本不支持

 

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

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

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

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个方法  都要先将 < ,> ," ,& 转义 ，用 Ext.util.Format.htmlEncode 即可

综合来说 ，还是不如 htmleditor 方便 ，做web开发确实还是 能用 htmleditor就用 htmleditor,更好就用 fckeditor 了

 

 

附录 ：http://www./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./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./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./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;
        }
      }

 

  (#)