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：somebody@somehost.ext", "");
        
        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自定义控件。

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