[C#] Hướng Dẫn Xây Dựng Trình Soạn Thảo Wysiwyg HTML

Trang chủ » Chèn Html Vào C# » [C#] Hướng Dẫn Xây Dựng Trình Soạn Thảo Wysiwyg HTML

Có thể bạn quan tâm

Chia sẻ

Nội dung

Giới thiệu

Csharpcanban.com sẽ hướng dẫn các bạn xây dựng một trình soạn thảo wysiwyg (visual) HTML bằng C#. Để thực hành bài này, các bạn cần tìm hiểu thêm về Web Browser Control và class IHTMLdocument2 của mshtml.

[C#] Hướng dẫn xây dựng trình soạn thảo wysiwyg HTML

Xây dựng ứng dụng

Bước 1. Đầu tiên chúng ta khởi tạo một ứng dụng mới. Đặt tên là CsharpCanBanHTMLEditor

Bước 2. Kéo các điều khiển Toolbar và Web Browser vào Form1, tiếp theo thiết lập các thuộc tính sau đâu cho Web Browser để mở chế độ Soạn thảo cho Web Browser:

HTMLEditor.AllowNavigation = true; HTMLEditor.Allowwebbrowserdrop = false; HTMLEditor.IsWebBrowserContextMenu = false; HTMLEditor.ScriptErrorsSuppressed = true;

Đặt tên cho Web Browser là HTMLEditor, còn các thuộc tính còn lại để nguyên mặc định.

Bước 3. Thêm namespace mshtml cho ứng dụng. Thực hiện như sau: – Nhấp chuột vào Project trên Menu. – Chọn Add Reference. – Chọn tab COM. – Tìm và chọn ‘Microsoft HTML Object Library’. -Nhấn OK.

– Trong file Form1.cs thêm namespace mshtml;

[C#] Hướng dẫn xây dựng trình soạn thảo wysiwyg HTML

Bước 4. Thêm biến toàn cục vào file Form1.cs

private IHTMLDocument2 doc;

Bước 5. Trong sự kiện Form1_Load() thêm đoạn mã sau đây để bật chức năng Soạn thảo cho Web Browser:

HTMLEditor.DocumentText = "<html><body></body></html>"; doc = HTMLEditor.document.DomDocument as IHTMLDocument2; doc.designMode = "On";

Tới đây chúng ta đã hoàn thành công đoạn chuẩn bị cho Web Browser để trở thành một trình soạn thảo wysiwyg HTML.

Bước 6. Thêm các chức năng cho trình soạn thảo CsharpCanBanHTMLEditor

Trong bước này chúng ta sẽ thêm các chức năng cho trình soạn thảo thông qua các Buttons, chẳng hạn như chức năng Chữ đậm, Chữ nghiêng, Thay đổi kích thước phông, Thay đổi kiểu phông, Thay đổi màu nền, Thay đổi màu chữ, v.v…

Xem thêm [C#] 4 cách sử dụng PostRequest bằng thư viện xNet

Trên Toolbar, các bạn thêm các Button mới, và đặt thuộc tính Text là: Bold, Italic, v.v…

Để chuyển chữ thành chữ đậm (Bold), thêm đoạn code sau vào sự kiện Click của Button

private void btnInDam_Click(object sender, EventArgs e) { HTMLEditor.Document.ExecCommand("Bold", false, null); }

[C#] Hướng dẫn xây dựng trình soạn thảo wysiwyg HTML

Để chuyển chữ thành chữ nghiêng (Italic), thêm đoạn code sau vào sự kiện Click của Button

private void btnInNghieng_Click(object sender, EventArgs e) { HTMLEditor.Document.ExecCommand("Italic", false, null); }

[C#] Hướng dẫn xây dựng trình soạn thảo wysiwyg HTML

Để chèn hình ảnh, thêm đoạn mã sau

private void btnChenHinh_Click(object sender, EventArgs e) { HTMLEditor.Document.ExecCommand("insertImage", true, null); }

[C#] Hướng dẫn xây dựng trình soạn thảo wysiwyg HTML

Như các bạn thấy, hàm ExecCommand có 3 tham số: – Tham số thứ nhất là tham số Lệnh, ví dụ: Bold, Italic, insertImage …. – Tham số thứ 2 có thể là False hoặc True dùng để hiển thị Dialog hoặc không hiển thị, tùy thuộc vào tham số thứ nhất. Ví dụ, khi chèn hình ảnh, ta cần phải dùng true để hiển thị hộp thoại. – Tham số thứ 3 là Object Value.

Cứ tiếp tục như vậy, các bạn có thể thêm các Button chức năng khác vào trình Soạn thảo WYSIWYG HTML. Dưới đây là danh sách Lệnh thường dùng đối với một WYSIWYG HTML:

HTMLEditor.document.ExecCommand("Bold", false, null); //Chuyển thành chữ đậm HTMLEditor.document.ExecCommand("Underline", false, null); //Gạch chân HTMLEditor.document.ExecCommand("Italics", false, null); //Chuyển thành chữ nghiêng HTMLEditor.document.ExecCommand("StrikeThrough", false, null); //Gạch ngang chữ HTMLEditor.document.ExecCommand("FontName", false, "Times New Roman"); //Thay đổi kiểu phông thành "Times New Roman" HTMLEditor.document.ExecCommand("FontName", false, "Arial"); //Thay đổi kiểu phông thành "Arial" HTMLEditor.document.ExecCommand("FontSize", false, "10"); //Thay đổi kích thước của phông thành 10px HTMLEditor.document.ExecCommand("InsertUnorderedList", false, null); //Thêm danh sách chưa xắp xếp HTMLEditor.document.ExecCommand("InsertOrderedList", false, null); //Thêm danh sách đã được xắp xếp HTMLEditor.document.ExecCommand("Cut", false, null); //Cắt đoạn văn bản HTMLEditor.document.ExecCommand("Copy", false, null);//Copy đoạn văn bản HTMLEditor.document.ExecCommand("Paste", false, null);//Dán đoạn văn bản HTMLEditor.document.ExecCommand("CreateLink", true, null); //Tạo Hyperlink

Để xem toàn bộ danh mục các hàm hãy truy cập vào đây.

Xem thêm [C#] Hướng dẫn định dạng tiền tệ trong textbox

Trên đây mới chỉ là các hàm chức năng được xây dựng sẵn. Tuy nhiên trên thực tế, rất nhiều khi chúng ta không muốn sử dụng các hàm xây dựng sẵn này, chẳng hạn chúng ta có thể tự tạo cho mình cách thêm/chỉnh sửa hình ảnh riêng thì sẽ thực hiện như sau:

string TEXT = "Đoạn văn bản cần thay thế!"; //Có thể là một đoạn mã HTML chứa IMG, hoặc Hyperlink, v.v... IHTMLTxtRange range = doc.selection.createRange() as IHTMLTxtRange; range.pasteHTML(TEXT); range.collapse(false); range.select();

Để lưu văn bản HTML trên CsharpCanBanHTMLEditor thành file *.html thực hiện như sau:

string SAVECONTENTS = HTMLEditor.DocumentText; //Khai báo biến để lấy toàn bộ văn bản HTML string appPath = System.IO.Path.GetDirectoryName(Application.ExecutablePath); using (StreamWriter writer = new StreamWriter(appPath + "/csharpcanban.html")) { writer.Write(SAVECONTENTS); } Kết luận

Như vậy, trên đây csharpcanban.com đã Hướng dẫn các bạn xây dựng một ứng dụng Trình soạn thảo WYSIWYG HTML bằng C#. Hãy thực hành ngay nhé các ban. Nếu gặp khó khăn hãy đặt câu hỏi trong phần bình luận ở dưới đây. Csharpcanban.com sẽ hướng dẫn các bạn chi tiết nhất. Chúc các bạn thành công !

Nếu thấy hay, hãy chia sẻ bài viết này lên Facebook, Twitter, Google+ và các mạng xã hội khác nhé các bạn.

Hãy thường xuyên theo dõi website csharpcanban.com để cập nhật các bài học mới. Sẽ còn rất nhiều điều thú vị chờ đợi các bạn ở phía trước.

Bản quyền

Nội dung trên csharpcanban.com được biên soạn, biên dịch từ nhiều nguồn khác nhau, đồng thời đã được viết thành chương trình chạy. Csharpcanban.Com bảo lưu mọi quyền đối với những bài viết này. Mọi hình thức sao chép đều cần phải được Csharpcanban.Com cấp phép.

Xem thêm [C#] Những hàm spin content hay

ĐĂNG KÝ MUA HÀNG

Email (*) Điện thoại (*) Tên sản phẩm/Dịch vụ:

Δ

Lượt xem: 2.641 Chia sẻ

Bài viết liên quan:

  • [WPF] Cách sử dụng log4net trong wpf

Điều hướng bài viết

[C#] Hướng dẫn xây dựng ứng dụng tìm kiếm Google [C#] Hướng dẫn sử dụng Backgroundworker

Từ khóa » Chèn Html Vào C#