BBCode使用图解教程

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

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

      

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

　　 <script src="/ckeditor/ckeditor.js"></script>

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。