Category Archives: Lập trình web

Editor FreeTextBox trong ASP.NET

Nhúng Editor FreeTextBox vào trong ASP.NET và cách sử dụng

HTML

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” ValidateRequest=”false”Inherits=”_Default” %>
<%@ Register TagPrefix=”FTB” Namespace=”FreeTextBoxControls” Assembly=”FreeTextBox” %>

<!DOCTYPE html >

<html xmlns=”http://www.w3.org/1999/xhtml“>
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<br />
<asp:HyperLink ID=”HyperLink1″ runat=”server” NavigateUrl=”” Font-Size=”Larger”>vietdesigner.net</asp:HyperLink>
<br />
<br />
<FTB:FreeTextBox ID=”editor” runat=”server”></FTB:FreeTextBox>
<br />
<asp:Button ID=”Button1″ runat=”server” onclick=”Button1_Click” Text=”Save” />
<br />
<br />
<asp:Label ID=”lbThongbao” runat=”server”></asp:Label>
</div>
</form>
</body>
</html>

CODE

using System;
using System.Configuration;
using System.Data;
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;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}

protected void Button1_Click(object sender, EventArgs e)
{
lbThongbao.Text = editor.Text;
}
}

Chú ý : Những dòng chữ màu đỏ không thể thiếu và bạn đừng quên copy FreeTextBox.dll vào thư mục Bin

Bạn có thể download http://adf.ly/vXkFg

Hoặc cách 2

Hiện nay có rất nhiều Editor hỗ trợ tốt cho việc soạn thảo trên website, trong bài viết này chúng ta sẽ tìm hiểu cách tích hợp ckEditor và các plugin kèm theo để hỗ trợ cho việc soạn thảo tin bài trên web viết bằng Asp.Net

1. CkEditor & ckFinder

– Việc đầu tiên các bạn cần phải vào trang http://ckeditor.com/download để tải bộ ckEditor 3.6.4 dành riêng cho Asp.Net về máy mình. Trong bộ công cụ các bạn tải về, các bạn chỉ cần chú ý đến file CKEditor.NET.dll ở /bin/Debug . Hãy copy file này vào thư mục bin trong project của bạn (Ở bước này mục đích chính là lấy file dll họ đã buill sẵn về để sử dụng).

– Tiếp theo hãy download bộ ckEdior tại đây, và ckFinder cho Asp.Net tại đây về máy, giải nén ra và copy vào thư mục root của project. (Hiện tại ckFinder vẫn là bản phải trả phí, tuy nhiên nó vẫn cho bạn dùng với dòng chữ cảnh báo đang dùng phiên bản demo). Bạn xem hình dưới để dễ hình dung.

– Trong thư mục ckfinder giải nén ra, bạn vào /bin/Debug tìm file ckFinder.dll và copy vào thủ mục bin trong project của bạn (Tương tự như với ckEditor.Net.dll như đã nói ở trên)

– Ở trang *.aspx của bạn, bạn thêm đoạn mã dưới đây vào ngay sau thẻ <%@ Page Language=”C#”… Sau khi thêm sẽ thế này

1
2
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

– Tiếp theo bạn thêm đoạn mã sau vào nội dung HTML, nơi mà bạn muốn đặt Editor. Trong đó BasePatch trỏ đến thư mục ckeditor mà bạn đã tải về và copy vào project. Trong trường hợp này thư mục ckeditor để trong thư mục root, nên đường dẫn sẽ là “~/ckeditor”. Trong project bạn có thể khác, khi đó bạn cần chỉnh sửa lại đường dẫn cho phù hợp thì Editor mới hiện thị được.

1
2
<CKEditor:CKEditorControl ID="editor1" CssClass="editor1" runat="server" Height="400" Width="900" BasePath="~/ckeditor">
</CKEditor:CKEditorControl>

– Để tích hợp ckFinder vào ckEditor, bạn vào trang *.aspx.cs của bạn, trong sự kiện Page_Load, thêm đoạn mã sau.

1
2
3
4
5
6
7
8
9
10
protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            //--config ckfinder
            CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
            _FileBrowser.BasePath = "ckfinder";
            _FileBrowser.SetupCKEditor(editor1);
        }
    }