Cấp bậc tác giả:

DOTNET

Asp.net & Jquery BBcode Editor tạo BBCode đơn giản

Được viết bởi QuangIT ngày 13/08/2012 lúc 08:48 PM
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
  • 0
  • 7867
Tải tệp tin: Click ở đây

Asp.net & Jquery BBcode Editor tạo BBCode đơn giản

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

Á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.

jQuery bbcode editor plugin thì bạn có thể download ở trên. 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]dngaz.com[/b] [u]Website Công Nghệ Dot Net[/u]" khi dữ liệu hiển thi của ta sẽ là "dngaz.com Website Công nghệ Dot Net". 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.

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML