BBCode使用图解教程

BBCode也是一个富文本编辑器，主要用于用户评论的时候插入表情，改变字体样式(加粗、变红、倾斜)。在HTML中，加粗的标签是<b></b>而在BBCode中是[b][/b]

1、将从网上下载的ckeditor复制到项目中。

2、将ckeditor.js引用到项目中。

3、在窗体加载完毕以后调用一个BbcFunction(),目的是替换之前的文本区域。

<script type="text/javascript">
    $(function () {    
        BbcFunction();        
    });
    
    function BbcFunction()
    {
        //通过id(textAreaContent)替换。id为textAreaContent的元素类型是textarea.
        CKEDITOR.replace(\'textAreaContent\',
        {
            extraPlugins: \'bbcode\',
            removePlugins: \'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates\',
            toolbar:
            [
                [\'Source\', \'-\', \'Save\', \'NewPage\', \'-\', \'Undo\', \'Redo\'],
                [\'Find\', \'Replace\', \'-\', \'SelectAll\', \'RemoveFormat\'],
                [\'Link\', \'Unlink\', \'Image\'],
                    \'/\',
                [\'FontSize\', \'Bold\', \'Italic\', \'Underline\'],
                [\'NumberedList\', \'BulletedList\', \'-\', \'Blockquote\'],
                [\'TextColor\', \'-\', \'Smiley\', \'SpecialChar\', \'-\', \'Maximize\']
            ],
            smiley_images:
            [
                \'regular_smile.gif\', \'sad_smile.gif\', \'wink_smile.gif\', \'teeth_smile.gif\', \'tounge_smile.gif\',
                \'embaressed_smile.gif\', \'omg_smile.gif\', \'whatchutalkingabout_smile.gif\', \'angel_smile.gif\', \'shades_smile.gif\',
                \'cry_smile.gif\', \'kiss.gif\'
            ],
            smiley_descriptions:
            [
                \'smiley\', \'sad\', \'wink\', \'laugh\', \'cheeky\', \'blush\', \'surprise\',
                \'indecision\', \'angel\', \'cool\', \'crying\', \'kiss\'
            ]
        });
    }    
</script>

4、得到富文本编辑器中的值。

　　之前得到文本框中的值是通过Jquery下的 Val()来获得里面的内容，如果使用BBCode富文本编辑器，这种方式是不行的。要通过实例和getData() 来获得数据。

　　var oEditor = CKEDITOR.instances.textAreaContent(id); 通过 id 来获得实例。

　　var val = oEditor.getData(); //得到输入的值。

　　然后再根据val的值进行判断，是否不能为空之类的。　　

　　if (val.trim().length > 0) {
　　　　//添加评论。
　　　　AddComment(val);
　　} else {
　　　　$("#commentMsg").text("评论内容不能为空！");
　　}

5、为富文本编辑器赋值。

　如果评论成功的话，就自动清除富文本编译器中的值，之前传统的做法是 $("#textAreaContent").text(""); 这样就为赋值为空了。现在使用这种做法是不行的。做法是通过实例名调用setData()

　 oEditor.setData(" ");

6、在评论的时候我为字体加粗变红了，结果插入数据库是这样的，[color=#ff0000][b]哈哈哈哈哈哈哈哈哈哈哈[/b][/color]，由于浏览器不认识这种标签，没有办法对字体进行渲染，所以显示出来的也是

[color=#ff0000][b]哈哈哈哈哈哈哈哈哈哈哈[/b][/color]这一坨东西，因此应该通过正则表达式进行转换成HTML编码。在展示评论之前调用一下下面的方法即可转换成HTML编码。

/// <summary>
/// 将UBB编码转成HTML编码
/// </summary>
/// <param name="argString"></param>
/// <returns></returns>
public static string UbbToHtml(string argString)
{
    string tString = argString;
    if (tString != "")
    {
        Regex tRegex;
        bool tState = true;
        tString = tString.Replace("&", "&amp;");
        tString = tString.Replace(">", "&gt;");
        tString = tString.Replace("<", "&lt;");
        tString = tString.Replace("\"", "&quot;");
        tString = Regex.Replace(tString, @"\[br\]", "<br />", RegexOptions.IgnoreCase);
        string[,] tRegexAry = {
          {@"\[p\]([^\[]*?)\[\/p\]", "$1<br />"},
          {@"\[b\]([^\[]*?)\[\/b\]", "<b>$1</b>"},
          {@"\[i\]([^\[]*?)\[\/i\]", "<i>$1</i>"},
          {@"\[u\]([^\[]*?)\[\/u\]", "<u>$1</u>"},
          {@"\[ol\]([^\[]*?)\[\/ol\]", "<ol>$1</ol>"},
          {@"\[ul\]([^\[]*?)\[\/ul\]", "<ul>$1</ul>"},
          {@"\[li\]([^\[]*?)\[\/li\]", "<li>$1</li>"},
          {@"\[code\]([^\[]*?)\[\/code\]", "<div class=\"ubb_code\">$1</div>"},
          {@"\[quote\]([^\[]*?)\[\/quote\]", "<div class=\"ubb_quote\">$1</div>"},
          {@"\[color=([^\]]*)\]([^\[]*?)\[\/color\]", "<font style=\"color: $1\">$2</font>"},
          {@"\[hilitecolor=([^\]]*)\]([^\[]*?)\[\/hilitecolor\]", "<font style=\"background-color: $1\">$2</font>"},
          {@"\[align=([^\]]*)\]([^\[]*?)\[\/align\]", "<div style=\"text-align: $1\">$2</div>"},
          {@"\[url=([^\]]*)\]([^\[]*?)\[\/url\]", "<a href=\"$1\">$2</a>"},
          {@"\[img\]([^\[]*?)\[\/img\]", "<img src=\"$1\" />"}
        };
        while (tState)
        {
            tState = false;
            for (int ti = 0; ti < tRegexAry.GetLength(0); ti++)
            {
                tRegex = new Regex(tRegexAry[ti, 0], RegexOptions.IgnoreCase);
                if (tRegex.Match(tString).Success)
                {
                    tState = true;
                    tString = Regex.Replace(tString, tRegexAry[ti, 0], tRegexAry[ti, 1], RegexOptions.IgnoreCase);
                }
            }
        }
    }
    return tString;
}

7、效果图如下。

End。