使用jQuery编写一个UBB编辑器

 
     最近因为工作需要，需要一个UBB的在线网页编辑器，从网上找了一些，效果都不太理想，而且对FIREFOX的支持性不是太好，于是决定自己写个算了，支持IE&FIREFOX，功能我只是根据我自己需要写了一些，代码倒不是太复杂，也算是拿过来顺便对jQuery练练手，欢迎有兴趣的朋友一起探讨。

代码如下：

  1 //  -----------------------------------------------
  2 //  jQuery版UBB编辑器(ie&ff)
  3 //  by 孙红军(andyran#gmail.com)
  4 //  2007/5/10 19:13
  5 //  -----------------------------------------------
  6
  7 $( function ()  {    
  8    
  9    $('#ubb_bold').click(function() { insertUBB('b'); });
 10    $('#ubb_italic').click(function() { insertUBB('i'); });
 11    $('#ubb_underline').click(function() { insertUBB('u'); });
 12    $('#ubb_alignleft').click(function() { insertUBB('align=left'); });
 13    $('#ubb_aligncenter').click(function() { insertUBB('align=center'); });
 14    $('#ubb_alignright').click(function() { insertUBB('align=right'); });
 15    $('#ubb_quote').click(function() { insertUBB('QUOTE'); });
 16    $('#ubb_font').change(function() { insertUBB('font='+$(this).val()); });
 17    $('#ubb_size').change(function() { insertUBB('size='+$(this).val()); });
 18    $('#ubb_color').change(function() { insertUBB('color='+$(this).val()); });
 19
 20  $('#ubb_url').click(function() {
 21      var p1 = prompt("显示链接的文本.\n如果为空，那么将只显示超级链接地址","");
 22      if (p1 != null) {
 23          var p2 = prompt("http:// 超级链接","http://");
 24          if (p2 != '' && p2 != 'http://') {
 25            if (p1 != '') {
 26                $('#Content').parseHtml('[url='+p2+']'+p1+'[/url]');
 27            }
 28            else {
 29                $('#Content').parseHtml('[url]'+p2+'[/url]');
 30            }
 31          }
 32      }
 33  } );
 34   
 35   $('#ubb_mail').click( function ()  {
 36      var p1 = prompt("显示链接的文本.\n如果为空，那么将只显示你的 Email 地址","");
 37      if (p1 != null) {
 38          var p2 = prompt("email 电子邮件地址","[email protected]");
 39          if (p2 != '') {
 40            if (p1 != '') {
 41                $('#Content').parseHtml('[email='+p2+']'+p1+'[/email]');
 42            }
 43            else {
 44                $('#Content').parseHtml('[email]'+p2+'[/email]');
 45            }
 46          }
 47      }
 48  } );  
 49     
 50   
 51   $('#ubb_img').click( function ()  {
 52      var p = prompt('请先将图片上传到您的图库中，然后将图片地址拷下粘贴在此：', 'http://');
 53      if (p == null || $.trim(p) == '' || p.toLowerCase() == 'http://')
 54          return;
 55        $('#Content').parseHtml('[IMG]' + p + '[/IMG]');      
 56  } );
 57   
 58   $('#ubb_flash').click( function ()  {
 59      var p = prompt("flash 动画文件的地址","http://");
 60      if (p == null || $.trim(p) == '' || p.toLowerCase() == 'http://')
 61          return;
 62        $('#Content').parseHtml('[flash=420,300]' + p + '[/flash]');      
 63  } ); 
 64   
 65   $('#ubb_mov').click( function ()  {
 66      var p = prompt("视频文件的地址","http://");
 67      if (p == null || $.trim(p) == '' || p.toLowerCase() == 'http://')
 68          return;
 69        $('#Content').parseHtml('[mp=380,330]' + p + '[/mp]');      
 70  } );    
 71   
 72   $('body').append($(face));
 73
 74     
 75   $('#ubb_face').click( function ()  {
 76      $(face).show(); 
 77     } );
 78    
 79 });
 80
 81   var  insertUBB  =   function  (html)  {
 82       var val = $('#Content').selection();       
 83      if (val == '') {
 84          alert('请选择文字');
 85          return false;
 86      }
 87      else {
 88          var end = html;
 89          if (html.indexOf('=') >= 0)
 90              end = html.substring(0,html.indexOf('='));          
 91          $('#Content').parseHtml('['+html+']' + val + '[/'+end+']');          
 92      }     
 93  }
 94
 95 function  insertFace(id)  {
 96    $('#Content').parseHtml('[face src=face'+id+'.gif][/face]'); 
 97    $(face).hide();
 98}
 99   
100 var  face  =  document.createElement('div');
101 $(face)
102     .attr('id', 'ubb_face_img')
103     .css(  {
104        display : 'none',
105        position: 'absolute',
106        visibility: 'visible',
107        top: '90px',
108        left: '470px',
109        border: '1px solid #666'
110    } );
111
112 for  ( var  i = 0  ; i  <   30  ; i ++ )  {
113    img = '<img onclick="insertFace('+i+')" border="0" src="face/face' + i + '.gif">';
114    if (i%6 == 5)
115        $(face).append(img+'<br />');
116    else
117        $(face).append(img);        
118}
119
120
121 $.fn.extend( {
122    selection: function() {
123        var txt = '';
124        var doc = this.get(0).document;
125        if (doc) {
126            var sel = doc.selection.createRange();
127                if (sel.text.length > 0)
128                    txt = sel.text;
129        }
130        else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
131            var s = this.get(0).selectionStart;
132            var e = this.get(0).selectionEnd;
133            if (s != e) {
134                txt = this.get(0).value.substring(s, e);
135            }
136        }
137        return $.trim(txt);
138    },
139    parseHtml: function(t) {
140        var doc = this.get(0).document;
141        if (doc) {
142            this.get(0).focus();
143            doc.selection.createRange().collapse;            
144            this.get(0).document.selection.createRange().text = t;
145        }
146        else if (this.get(0).selectionStart || this.get(0).selectionStart == '0') {
147            var s = this.get(0).selectionStart;
148            var e = this.get(0).selectionEnd;
149            var val = this.get(0).value;
150            var start = val.substring(0,s);
151            var end = val.substring(e);
152            this.get(0).value = start + t + end;
153        } 
154    }
155} )
156

    完整代码下载请点这里，注意需要自己改下jquery链接，这个包里不包含jquery的代码