Việc sử dụng BBcode Editor chắc bạn đã quá quen thuộc vì nó được sử dụng ở đa số các diễn đàn. Trong bài viết này tôi hướng dẫn bạn xây dựng một BBCode đơn giản cho website của bạn với Asp.net & Jquery DEMO
Áp dụng cho bài này bạn có thể dùng cho việc tạo Form comment cho bài viết. Nếu không dùng BBcode mà dùng Editor có hỗ trợ html thì người dùng comment có thể sẽ chèn nhiều code html điều này không tốt khi bạn lưu vào Database.
Để xem demo bạn có thể truy cập http://hmclip.net chọn một clip bạn sẽ thấy phía dưới clip là commen được áp dụng BBcode
jQuery bbcode editor plugin thì bạn có thể download tại đây Download về bạn chạy demo.html là ta đã có bbcode rồi. Việc tiếp theo là ta áp dụng nó vào trong trang aspx và khi dữ liệu bbcode này đã được lưu xuống cơ sở dữ liệu thì ta cần xây dựng class để hiển thị dữ liệu lên trình duyệt đúng định dạng mà người muốn.
Tại trang aspx bạn chỉ cần code như sau:
<link rel="stylesheet" type="text/css" href="bbedit.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.bbedit.min.js"></script>
<script type="text/javascript">
$("#txtBB").bbedit({
highlight: true,
enableSmileybar: false,
tags: 'b,i,u,s,url,img,code,quote'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox TextMode="MultiLine" ID="txtBB" runat="server" Rows="5" Columns="50" />
</form>
Giả dử tôi có thông tin nhập vào dạng: "[b]hmweb.com.vn[/b] [u]Chia sẻ là niềm vui[/u]" khi dữ liệu hiển thi của ta sẽ là "hmweb.com.vn Chia sẻ là niềm vui". Giờ tôi sẽ cung cấp cho bạn class để format lại định dạng. Trong App_Code bạn tạo Class ConvertBBCodeToHTML và code class này như sau:
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text.RegularExpressions;/// <summary>
/// Summary description for ConvertBBCodeToHTML
/// </summary>
public class ConvertBBCodeToHTML
{
public ConvertBBCodeToHTML()
{
//
// TODO: Add constructor logic here
//
}
/// <summary>
/// A method to convert basic BBCode to HTML
/// </summary>
/// <param name="str">A string formatted in BBCode</param>
/// <returns>The HTML representation of the BBCode string</returns>
public string BBCodeToHTML(string str)
{
Regex exp;
// Định dạng lại thẻ [b]
exp = new Regex(@"\[b\](.+?)\[/b\]");
str = exp.Replace(str, "<strong>$1</strong>");
// Định dạng lại thẻ [i][/i]
exp = new Regex(@"\[i\](.+?)\[/i\]");
str = exp.Replace(str, "<em>$1</em>");// Định dạng lại thẻ: [u][/u]
exp = new Regex(@"\[u\](.+?)\[/u\]");
str = exp.Replace(str, "<u>$1</u>");// Định dạng lại thẻ : [s][/s]
exp = new Regex(@"\[s\](.+?)\[/s\]");
str = exp.Replace(str, "<strike>$1</strike>");// Định dạng lại thẻ: [url=www.website.com]my site[/url]
// Đầu ra: <a href="www.website.com">my site</a> // Ở đây nếu không muốn cho thuộc tính title bạn có thể bỏ đi
exp = new Regex(@"\[url\=([^\]]+)\]([^\]]+)\[/url\]");
str = exp.Replace(str, "<a href=\"$1\" target=\"_blank\" title=\"$2\">$2</a>");exp = new Regex(@"\[url]([^\]]+)\[/url\]");
str = exp.Replace(str, "<a href=\"$1\" target=\"_blank\" title=\"$1\">$1</a>");// Định dạng lại thẻ: [img]www.website.com/img/image.jpeg[/img]
// Đầu ra: <img src="www.website.com/img/image.jpeg" />
exp = new Regex(@"\[img\]([^\]]+)\[/img\]");
str = exp.Replace(str, "<img src=\"$1\" />");// Thêm thuộc tính alt cho img
exp = new Regex(@"\[img\=([^\]]+)\]([^\]]+)\[/img\]");
str = exp.Replace(str, "<img src=\"$1\" alt=\"$2\" />");//Định dạng lại thẻ: [color=red][/color]
exp = new Regex(@"\[color\=([^\]]+)\]([^\]]+)\[/color\]");
str = exp.Replace(str, "<font color=\"$1\">$2</font>");
exp = new Regex(@"\[colour\=([^\]]+)\]([^\]]+)\[/colour\]");
str = exp.Replace(str, "<font color=\"$1\">$2</font>");// Định dạng lại thẻ: [size=3][/size]
exp = new Regex(@"\[size\=([^\]]+)\]([^\]]+)\[/size\]");
str = exp.Replace(str, "<font size=\"+$1\">$2</font>");// Định dạng lại thẻ<br />
str = str.Replace("\r\n", "<br />\r\n");return str;
}
}
Sử dụng Class:
ConvertBBCodeToHTML fConvert = new ConvertBBCodeToHTML();
string p = fConvert.BBCodeToHTML(txtBB.Text + "");
Với class trên bạn có thể áp dụng và chỉnh sửa cũng như thêm các chức năng khác mà bạn muốn.
Chúc bạn thành công
