ZxjayUBBEditor 源程序(Javascript)

博客、论坛简单的回复不愿使用动辄数百K的线编辑器(如FCKEditor等)，自己写了个小巧的UBB编辑器，代码压缩后不足10K，小巧快速。 界面如下：


Javascript代码为：

var middiv;
function ZxjayUBBEditor(txtID)
{
   this .TextBox = document.getElementById(txtID);
   this .Menu = this .BuildMenu();
}

// function for intialize Editor
ZxjayUBBEditor.prototype.IntilizeEditor = function ()
{
   document.body.insertBefore( this .Menu, this .TextBox);
   this .FontSize();
   this .Bold();
   this .Italic();
   this .UnderLine();
   this .Delete();
   this .ColorList();
   this .CodeList();
   this .InsertUrl();
   this .InsertEmail();
   this .InsertImage();
   this .AlignLeft();
   this .AlignCenter();
   this .AlignRight();
   this .Help();
   this .ClearBothDiv();
};

ZxjayUBBEditor.prototype.BuildMenu = function ()
{
   menudiv = document.createElement( " div " );
   menudiv.className = " ZxjayUBBEditorMenu " ;
   menudiv.id = " ZxjayUBBEditorMenu " ;
   return menudiv;
};

// function for insert tag
ZxjayUBBEditor.prototype.InsertTag = function (markup)
{
   ubb.TextBox.focus();
   var strEnd = markup.replace( / \[ / ig, ' [/ ' );
   if (strEnd.indexOf( ' = ' ) > - 1 )
   {
      strEnd = strEnd.replace( / (.*?)\=.*?\] / , ' $1] ' );
   }
   if (document.selection && document.selection.type == " Text " )
   {
       // IE, Opera
       var oStr = document.selection.createRange();
      oStr.text = markup + oStr.text + strEnd;
   }
   else if (window.getSelection && this .TextBox.selectionStart > - 1 )
   {
       // Netscape
       var st = this .TextBox.selectionStart;
       var ed = this .TextBox.selectionEnd;
       this .TextBox.value = this .TextBox.value.substring( 0 , st) + markup + this .TextBox.value.substring(st, ed) + strEnd + this .TextBox.value.slice(ed);
   }
   else
   {
       this .TextBox.value += markup + strEnd;
   }
};

ZxjayUBBEditor.prototype.FontSize = function ()
{
   var menuFontSize = document.createElement( " input " );
   menuFontSize.type = " button " ;
   menuFontSize.id = " menuItemFontSize " ;
   menuFontSize.title = " 字体大小 " ;
   menuFontSize.className = " ZxjayUBBEditorMenuItem " ;
   menuFontSize.style.backgroundPosition = " 0px 0px " ;
   this .Menu.appendChild(menuFontSize);

   var ftsize = [];

   ftsize.push( " 10px " );
   ftsize.push( " 12px " );
   ftsize.push( " 13px " );
   ftsize.push( " 14px " );
   ftsize.push( " 16px " );
   ftsize.push( " 18px " );

   var ftList = " <table border='0' cellpadding='0' cellspacing='2'> " ;

   var count = 0 ;
   var temp = 0 ;
   for ( var tr = 0 ; tr < 2 ; tr ++ )
   {
      ftList += " <tr> " ;
       for ( var td = 0 ; td < 3 ; td ++ )
      {
         temp = count ++ ;
         ftList += " <td><input onclick='ubb.GetFontSize(\" " + ftsize[temp] + " \")' type='button' value=' " + ftsize[temp] + " ' /></td> " ;
         // to be changed : the instance name must be "ubb"
      }
      ftList += " </tr> " ;
   }

   ftList += " </table> " ;

   var fts = document.createElement( " div " );
   fts.id = " FontSizeTable " ;
   fts.style.display = " none " ;
   fts.className = " ZxjayUBBEditorFontSizeList " ;
   fts.innerHTML = ftList;
   document.body.insertBefore(fts, this .TextBox);
  
   menuFontSize.onclick = function (e)
   {
       if (middiv)
      {
         hideeve(middiv);
      }
      middiv = fts.id;
       if (fts.style.display == " none " )
      {
         fts.style.display = "" ;
      }

       var evt = (window.event || e);

       if (evt.preventDefault)
      {
         evt.preventDefault();
         evt.stopPropagation();
      }
       else
      {
         evt.cancelBubble = true ;
         evt.returnValue = false ;
      }

       if (document.attachEvent)
      {
         document.attachEvent( " onclick " , function ()
             {
                 // ubb.TextBox.focus();
                fts.style.display = " none " ;
             }
         );
      }
       else
      {
         document.addEventListener( " click " , hideeve, false );
      }
   };
}
;

ZxjayUBBEditor.prototype.GetFontSize = function (fs)
{
   ubb.InsertTag( " [size= " + fs + " ] " );
};

ZxjayUBBEditor.prototype.Bold = function ()
{
   var menuBold = document.createElement( " input " );
   menuBold.type = " button " ;
   menuBold.id = " menuItemBold " ;
   menuBold.title = " 粗体 " ;
   menuBold.className = " ZxjayUBBEditorMenuItem " ;
   menuBold.style.backgroundPosition = " -17px 0px " ;
   this .Menu.appendChild(menuBold);
   menuBold.onclick = function ()
   {
        ubb.InsertTag( " [b] " );
   };
};

ZxjayUBBEditor.prototype.Italic = function ()
{
     var menuItalic = document.createElement( " input " );
    menuItalic.type = " button " ;
    menuItalic.id = " menuItemItalic " ;
    menuItalic.title = " 斜体 " ;
    menuItalic.className = " ZxjayUBBEditorMenuItem " ;
    menuItalic.style.backgroundPosition = " -33px 0px " ;
     this .Menu.appendChild(menuItalic);
    menuItalic.onclick = function ()
    {
        ubb.InsertTag( " [i] " );
    };
};

ZxjayUBBEditor.prototype.UnderLine = function ()
{
     var menuUnderLine = document.createElement( " input " );
    menuUnderLine.type = " button " ;
    menuUnderLine.id = " menuItemUnderLine " ;
    menuUnderLine.title = " 下划线 " ;
    menuUnderLine.className = " ZxjayUBBEditorMenuItem " ;
    menuUnderLine.style.backgroundPosition = " -49px 0px " ;
     this .Menu.appendChild(menuUnderLine);
    menuUnderLine.onclick = function ()
    {
        ubb.InsertTag( " [u] " );
    };
};

ZxjayUBBEditor.prototype.Delete = function ()
{
     var menuDelete = document.createElement( " input " );
    menuDelete.type = " button " ;
    menuDelete.id = " menuItemDelete " ;
    menuDelete.title = " 删除线 " ;
    menuDelete.className = " ZxjayUBBEditorMenuItem " ;
    menuDelete.style.backgroundPosition = " -64px 0px " ;
     this .Menu.appendChild(menuDelete);
    menuDelete.onclick = function ()
    {
        ubb.InsertTag( " [del] " );
    };
};

ZxjayUBBEditor.prototype.ColorList = function ()
{
     var menuColorList = document.createElement( " input " );
    menuColorList.type = " button " ;
    menuColorList.id = " menuItemColorList " ;
    menuColorList.title = " 字体颜色 " ;
    menuColorList.className = " ZxjayUBBEditorMenuItem " ;
    menuColorList.style.backgroundPosition = " -81px 0px " ;
     this .Menu.appendChild(menuColorList);
    
     var clList = [];
    
    clList.push( " #000000 " );
    clList.push( " #993300 " );
    clList.push( " #333300 " );
    clList.push( " #003300 " );
    clList.push( " #003366 " );
    clList.push( " #000090 " );
    clList.push( " #333399 " );
    clList.push( " #333333 " );    
    clList.push( " #900000 " );
    clList.push( " #FF6600 " );
    clList.push( " #909000 " );
    clList.push( " #009000 " );
    clList.push( " #009090 " );
    clList.push( " #0000FF " );
    clList.push( " #666699 " );
    clList.push( " #909090 " );
    clList.push( " #FF0000 " );
    clList.push( " #FF9900 " );
    clList.push( " #99CC00 " );
    clList.push( " #339966 " );
    clList.push( " #33CCCC " );
    clList.push( " #3366FF " );
    clList.push( " #900090 " );
    clList.push( " #999999 " );    
    clList.push( " #FF00FF " );
    clList.push( " #FFCC00 " );
    clList.push( " #FFFF00 " );
    clList.push( " #00FF00 " );
    clList.push( " #00FFFF " );
    clList.push( " #00CCFF " );
    clList.push( " #993366 " );
    clList.push( " #C0C0C0 " );
    clList.push( " #FF99CC " );
    clList.push( " #FFCC99 " );
    clList.push( " #FFFF99 " );
    clList.push( " #CCFFCC " );
    clList.push( " #CCFFFF " );
    clList.push( " #99CCFF " );
    clList.push( " #CC99FF " );
    clList.push( " #FFFFFF " );
    
     var clrTB = " <table border='0' cellpadding='0' cellspacing='4'> " ;
    
    count = 0 ;
    temp = 0 ;
    
     for ( var tr = 0 ; tr < 5 ; tr ++ )
    {
        clrTB += " <tr> " ;
         for ( var td = 0 ; td < 8 ; td ++ )
        {
            temp = count ++ ;
            clrTB += " <td><input type='button' style='background-color: " + clList[temp] + " ' onclick='ubb.GetColor(\" " + clList[temp] + " \")' /></td> " ;
        }
        clrTB += " </tr> " ;
    }
    clrTB += " </table> " ;
    
     var clrlst = document.createElement( " div " );
    clrlst.id = " ColorListTable " ;
    clrlst.style.display = " none " ;
    clrlst.className = " ZxjayUBBEditorColorList " ;
    clrlst.innerHTML = clrTB;
    document.body.insertBefore(clrlst, this .TextBox);
    
    menuColorList.onclick = function (e)
    {
         if (middiv)
        {
            hideeve(middiv);
        }
        middiv = clrlst.id;
         if (clrlst.style.display == " none " )
        {
            clrlst.style.display = "" ;
        }
        
         var evt = (window.event || e);
        
         if (evt.preventDefault)
        {
            evt.preventDefault();
            evt.stopPropagation();
        }
         else
        {
            evt.cancelBubble = true ;
            evt.returnValue = false ;
        }
        
         if (document.attachEvent)
        {
            document.attachEvent( " onclick " , function ()
                {
                    clrlst.style.display = " none " ;
                }
            );
        }
         else
        {
            document.addEventListener( " click " , hideeve, false );
        }
    };
};

ZxjayUBBEditor.prototype.GetColor = function (clr)
{
    ubb.InsertTag( " [color= " + clr + " ] " );  
};

ZxjayUBBEditor.prototype.CodeList = function ()
{
     var menuCode = document.createElement( " input " );
    menuCode.type = " button " ;
    menuCode.id = " menuItemCodeList " ;
    menuCode.title = " 插入源代码 " ;
    menuCode.className = " ZxjayUBBEditorMenuItem " ;
    menuCode.style.backgroundPosition = " -193px 0px " ;
     this .Menu.appendChild(menuCode);
    
     var cdlst = [];
    
    cdlst.push( " C# " );
    cdlst.push( " CSS " );
    cdlst.push( " HTML " );
    cdlst.push( " Java " );
    cdlst.push( " JScript " );
    cdlst.push( " MSIL " );
    cdlst.push( " Perl " );
    cdlst.push( " PHP " );
    cdlst.push( " Python " );
    cdlst.push( " SQL " );
    cdlst.push( " VB.NET " );
    cdlst.push( " XML " );
    
     var cdList = " <table border='0' cellpadding='0' cellspacing='0'> " ;
    count = 0 ;
    temp = 0 ;
     for (tr = 0 ; tr < cdlst.length ; tr ++ )
    {
        temp = count ++ ;
        cdList += " <tr><td><input type='button' value=' " + cdlst[temp] + " ' onclick='ubb.GetCode(\" " + cdlst[temp] + " \")' /></td></tr> " ;
    }
    cdList += " </table> " ;
    
     var cdTB = document.createElement( " div " );
    cdTB.id = " CodeListTable " ;
    cdTB.style.display = " none " ;
    cdTB.className = " ZxjayUBBEditorCodeList " ;
    cdTB.innerHTML = cdList;
    document.body.insertBefore(cdTB, this .TextBox);
    
    menuCode.onclick = function (e)
    {
         if (middiv)
        {
            hideeve(middiv);
        }
        middiv = cdTB.id;
         if (cdTB.style.display == " none " )
        {
            cdTB.style.display = "" ;
        }
        
         var evt = (window.event || e);
        
         if (evt.preventDefault)
        {
            evt.preventDefault();
            evt.stopPropagation();
        }
         else
        {
            evt.cancelBubble = true ;
            evt.returnValue = false ;
        }
        
         if (document.attachEvent)
        {
            document.attachEvent( " onclick " , function ()
                {
                    cdTB.style.display = " none " ;
                }
            );
        }
         else
        {
            document.addEventListener( " click " , hideeve, false );
        }
    };
};

ZxjayUBBEditor.prototype.GetCode = function (cd)
{
    ubb.InsertTag( " [code= " + cd + " ] " );
};

ZxjayUBBEditor.prototype.InsertUrl = function ()
{
     var menuInsertUrl = document.createElement( " input " );
    menuInsertUrl.type = " button " ;
    menuInsertUrl.id = " menuItemInsertUrl " ;
    menuInsertUrl.title = " 插入超链接 " ;
    menuInsertUrl.className = " ZxjayUBBEditorMenuItem " ;
    menuInsertUrl.style.backgroundPosition = " -96px 0px " ;
     this .Menu.appendChild(menuInsertUrl);
    menuInsertUrl.onclick = function ()
    {
         var url = prompt( " 请输入超链接地址 " , " http:// " );
        
         if (url != null && url.indexOf( " http:// " ) < 0 )
        {
            alert( " 请输入完整的超链接地址！ " );
             return ;
        }
         if (url != null )
        {
            ubb.InsertTag( " [url= " + url + " ] " );
        }
    };
};

ZxjayUBBEditor.prototype.InsertEmail = function ()
{
     var menuInsertEmail = document.createElement( " input " );
    menuInsertEmail.type = " button " ;
    menuInsertEmail.id = " menuItemInsertEmail " ;
    menuInsertEmail.title = " 插入Email " ;
    menuInsertEmail.className = " ZxjayUBBEditorMenuItem " ;
    menuInsertEmail.style.backgroundPosition = " -112px 0px " ;
     this .Menu.appendChild(menuInsertEmail);
    menuInsertEmail.onclick = function ()
    {
         var mail = prompt( " 请输入Email：[email protected] " , "" );
        
         if (mail != null && ! / ^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$ / .test(mail))
        {
             return ;
        }
         if (mail != null )
        {
            ubb.InsertTag( " [email= " + mail + " ] " );
        }
    };
};

ZxjayUBBEditor.prototype.InsertImage = function ()
{
     var menuInsertImage = document.createElement( " input " );
    menuInsertImage.type = " button " ;
    menuInsertImage.id = " menuItemInsertImage " ;
    menuInsertImage.title = " 插入图片 " ;
    menuInsertImage.className = " ZxjayUBBEditorMenuItem " ;
    menuInsertImage.style.backgroundPosition = " -129px 0px " ;
     this .Menu.appendChild(menuInsertImage);
    menuInsertImage.onclick = function ()
    {
         var imgurl = prompt( " 请输入图片路径 " , " http:// " );
        
         if (imgurl != null && imgurl.indexOf( " http:// " ) < 0 )
        {
            alert( " 请输入完整的图片路径！ " );
             return ;
        }
         if (imgurl != null )
        {
            ubb.InsertTag( " [img= " + imgurl + " ] " );
        }
    };
};

ZxjayUBBEditor.prototype.AlignLeft = function ()
{
     var menuAlignLeft = document.createElement( " input " );
    menuAlignLeft.type = " button " ;
    menuAlignLeft.id = " menuItemAlignLeft " ;
    menuAlignLeft.title = " 左对齐 " ;
    menuAlignLeft.className = " ZxjayUBBEditorMenuItem " ;
    menuAlignLeft.style.backgroundPosition = " -145px 0px " ;
     this .Menu.appendChild(menuAlignLeft);
    menuAlignLeft.onclick = function ()
    {
        ubb.InsertTag( " [align=left] " );
    };
};

ZxjayUBBEditor.prototype.AlignCenter = function ()
{
     var menuAlignCenter = document.createElement( " input " );
    menuAlignCenter.type = " button " ;
    menuAlignCenter.id = " menuItemAlignCenter " ;
    menuAlignCenter.title = " 居中对齐 " ;
    menuAlignCenter.className = " ZxjayUBBEditorMenuItem " ;
    menuAlignCenter.style.backgroundPosition = " -161px 0px " ;
     this .Menu.appendChild(menuAlignCenter);
    menuAlignCenter.onclick = function ()
    {
        ubb.InsertTag( " [align=center] " );
    };
};

ZxjayUBBEditor.prototype.AlignRight = function ()
{
     var menuAlignRight = document.createElement( " input " );
    menuAlignRight.type = " button " ;
    menuAlignRight.id = " menuItemAlignRight " ;
    menuAlignRight.title = " 右对齐 " ;
    menuAlignRight.className = " ZxjayUBBEditorMenuItem " ;
    menuAlignRight.style.backgroundPosition = " -177px 0px " ;
     this .Menu.appendChild(menuAlignRight);
    menuAlignRight.onclick = function ()
    {
        ubb.InsertTag( " [align=right] " );
    };
};

ZxjayUBBEditor.prototype.Help = function ()
{
     var menuHelp = document.createElement( " input " );
    menuHelp.type = " button " ;
    menuHelp.id = " menuItemHelp " ;
    menuHelp.title = " 帮助 " ;
    menuHelp.className = " ZxjayUBBEditorMenuItem " ;
    menuHelp.style.backgroundPosition = " -209px 0px " ;
     this .Menu.appendChild(menuHelp);
    menuHelp.onclick = function ()
    {
        window.open( " about:blank " , "" );
    };
};

ZxjayUBBEditor.prototype.ClearBothDiv = function ()
{
     var BlankDiv = document.createElement( " div " );
    BlankDiv.style.clear = " both " ;
    BlankDiv.style.floatStyle = " both " ;
    BlankDiv.innerHTML = " " ;
     this .Menu.appendChild(BlankDiv);
}

function hideeve()
{
   document.getElementById(middiv).style.display = " none " ;
}

这是第一次用Javascript面向对象思想写的UBBEditor，多平台支持，多浏览器支持。功能不完善，可以以此为基础继续完善。解析代码可根据自己的编程语言自己写，也可用Javascript解析。为保持平台独立性，没有将其封装为ASP.NET自定义控件。

演示地址：本文章评论用的编辑器
下载地址： 点击下载