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](https://csharpcanban.com/wp-content/uploads/2018/12/Xay-dung-trinh-soan-thao-HTML-bang-C-sharp-1.jpg)
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](https://csharpcanban.com/wp-content/uploads/2018/12/Xay-dung-trinh-soan-thao-HTML-bang-C-sharp-5.jpg)
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…
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](https://csharpcanban.com/wp-content/uploads/2018/12/Xay-dung-trinh-soan-thao-HTML-bang-C-sharp-2.jpg)
Để 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](https://csharpcanban.com/wp-content/uploads/2018/12/Xay-dung-trinh-soan-thao-HTML-bang-C-sharp-3.jpg)
Để 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](https://csharpcanban.com/wp-content/uploads/2018/12/Xay-dung-trinh-soan-thao-HTML-bang-C-sharp-4.jpg)
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.
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.
