使用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 电子邮件地址","xxx@domain.com");
 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
 95function insertFace(id) {
 96    $('#Content').parseHtml('[face src=face'+id+'.gif][/face]'); 
 97    $(face).hide();
 98}
 99  
100var 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
112for (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的代码