Hướng dẫn wysiwyg html editor - wysiwyg trình soạn thảo html

Question

Chỉnh sửa HTML được xem là một công việc hết sức quan trọng, bởi vì chỉ khi bạn chỉnh sửa được HTML thì bạn mới có thể hoàn toàn làm chủ được bài blog của mình. Và khi đó, bạn mới có thể tùy chỉnh blog sao cho phù hợp với sản phẩm và nhu cầu. Nếu như bạn biết cách sử dụng các công cụ chỉnh sửa HTML trên Blogspot, thì việc tùy chỉnh các tiện ích, mã code, JavaScript để thiết kế và tùy chỉnh trang blog sẽ trở nên dễ dàng hơn. Vậy bạn đã biết cách sử dụng Blogspot HTML Editor chưa? Bài viết sau đây sẽ giúp bạn nhé!

Nội dung chính Show

Lợi ích và hạn chế của HTML Editor
Sử dụng Blogspot HTML Editor với 4 bước đơn giản
Cách cài đặt chung của các WYSIWYG editor
Các WYSIWYG khuyên dùng
2. MooEditable
3. jHtmlArea
6. Ckeditor

HTML Editor là gì?
Lợi ích và hạn chế của HTML Editor
Sử dụng Blogspot HTML Editor với 4 bước đơn giản

Bộ công cụ editor của website có nhiều cách gọi khác nhau như editor website, editor html… và từ phổ biến mà các lập trình viên hay dùng là WYSIWYG HTML editor hay WYSIWYG WYSIWYG. Thường được dịch là “thấy là lấy được” và hiểu như là “Giao diện tương tác tức thời – mắt thấy tay làm”. Chủ yếu thường được dùng trong các chương trình ứng dụng văn phòng, các chương trình biên soạn, thiết kế web…

Editor html là một trong những bộ công cụ Edit của website

Một ví dụ đơn giản, HTML cho phép viết bằng bất cứ trình soạn thảo văn bản nào. Từ đơn giản nhất (như Notepad) đến phức tạp, cao cấp hơn (như Microsoft Office Word, K-Word). Tuy nhiên, mọi chuyện sẽ vẫn ổn thỏa cho đến khi người viết mã, hay nhân viên thiết kế muốn vẽ lên những bảng biểu phức tạp bắt buộc phải có. Khi đó những dòng mã sẽ cần phải phức tạp và các thẻ (tag) thường chồng chéo lên nhau.

HTML editor viết trên javascript tạo ra tương tự như một trường text field cơ bản. Bao gồm input text hoặc textarea. Nhưng nó các công cụ hỗ trợ định dạng văn bản phong phú hơn. Nó giúp cho người dùng nhập và định dạng văn bản như một trình biên tập chỉnh sửa văn bản chuyên nghiệp Microsoft Word. Khi bạn gửi request form lên máy chủ Web. Để hiển thị trên web như bạn nhìn thấy lúc chỉnh sửa. Editor này sẽ chuyển các định dạng text sang mã HTML tương ứng.

Lợi ích và hạn chế của HTML Editor

Sử dụng Blogspot HTML Editor với 4 bước đơn giản

Bộ công cụ editor của website có nhiều cách gọi khác nhau như editor website, editor html… và từ phổ biến mà các lập trình viên hay dùng là WYSIWYG HTML editor hay WYSIWYG WYSIWYG. Thường được dịch là “thấy là lấy được” và hiểu như là “Giao diện tương tác tức thời – mắt thấy tay làm”. Chủ yếu thường được dùng trong các chương trình ứng dụng văn phòng, các chương trình biên soạn, thiết kế web…

Sử dụng Blogspot HTML Editor với 4 bước đơn giản

Bộ công cụ editor của website có nhiều cách gọi khác nhau như editor website, editor html… và từ phổ biến mà các lập trình viên hay dùng là WYSIWYG HTML editor hay WYSIWYG WYSIWYG. Thường được dịch là “thấy là lấy được” và hiểu như là “Giao diện tương tác tức thời – mắt thấy tay làm”. Chủ yếu thường được dùng trong các chương trình ứng dụng văn phòng, các chương trình biên soạn, thiết kế web…

Hướng dẫn wysiwyg html editor - wysiwyg trình soạn thảo html

Editor html là một trong những bộ công cụ Edit của website

Một ví dụ đơn giản, HTML cho phép viết bằng bất cứ trình soạn thảo văn bản nào. Từ đơn giản nhất (như Notepad) đến phức tạp, cao cấp hơn (như Microsoft Office Word, K-Word). Tuy nhiên, mọi chuyện sẽ vẫn ổn thỏa cho đến khi người viết mã, hay nhân viên thiết kế muốn vẽ lên những bảng biểu phức tạp bắt buộc phải có. Khi đó những dòng mã sẽ cần phải phức tạp và các thẻ (tag) thường chồng chéo lên nhau.
HTML editor viết trên javascript tạo ra tương tự như một trường text field cơ bản. Bao gồm input text hoặc textarea. Nhưng nó các công cụ hỗ trợ định dạng văn bản phong phú hơn. Nó giúp cho người dùng nhập và định dạng văn bản như một trình biên tập chỉnh sửa văn bản chuyên nghiệp Microsoft Word. Khi bạn gửi request form lên máy chủ Web. Để hiển thị trên web như bạn nhìn thấy lúc chỉnh sửa. Editor này sẽ chuyển các định dạng text sang mã HTML tương ứng.
Điều đầu tiên có thể thấy là người sử dụng không cần hiểu nhiều về các thẻ định dạng HTML. Nhưng vẫn có thể tạo ra nội dung văn bản đa dạng đẹp mắt. Do đó nó rất hợp lý tích hợp cho cho các Contents manage system(CMS), Blogging system, Webmail application, … Thạm chí bạn là người am hiểu về HTML – CSS thì cũng sẽ cảm thấy làm việc với nó nhanh hơn, tiện lợi hơn là viết các đoạn định dạng văn bản bằng HTML – CSS bằng tay đúng không?
Một vấn đề xảy ra với các trình biên tập này là người tạo ra nó có thể tích hợp nhiều chức năng có thể thừa. Dẫn đến bộ công cụ HTML nặng nề. Mặc dù gần đây càng ngày họ càng cải thiện chất lượng để nó ngày càng tối ưu và đầy đủ nhất. Một vấn đề khác là khi sử dụng WYSIWYG có thể họ dùng các thẻ định dạng chuẩn riêng làm phá vỡ các thẻ định dạng HTML chuẩn chung.
Để sử dụng công cụ chỉnh sửa BlogspotHTML, các bạn hãy làm theo các bước hướng dẫn sau đây:

Bước hướng dẫn sử dụng Blogspot HTML Editor

Trong qúa trình làm web mình có sử dụng qua khá nhiều editor phục vụ cho việc soạn thảo nội dung dễ dàng, trực quan hơn. Mỗi editor sẽ có những ưu điểm, nhược điểm riêng. Các bạn có thể vào trang web của chúng để tìm hiểu thêm vì giới hạn ở bài viết này mình không thể đề cập quá nhiều nội dung mà chủ yếu chỉ đề xuất những cái tên để các bạn có thể biết và tham khải,

WYSIWYG là chữ viết tắt của What You See Is What You Get (thấy sao là ra vậy). Những editors này có giao diện biên tập văn bản sẽ hiển thị chính xác cách hiển thị của mã nguồn khi xuất bản thành trang web. Sử dụng WYSIWYG editor thì bạn không cần kiến thức về HTML; vì vậy sẽ dễ dàng hơn với những ai không có kinh nghiệm lập trình.

Các bạn có thể hình dung nó giống như khi các bạn gõ văn bản trong Microsoft Word vậy. Cứ chọn định dạng trên thanh công cụ.

Một số tính năng phổ biến của cacs WYSIWYG editor phải kể đến như:WYSIWYG editor phải kể đến như:

Định dạng kiểu chữ in đậm, nghiêng, gạch chân, …
Tạo các tiêu đề văn bản từ h2 -> h6, …
Tạo các liên kết link trong tài liệu
Thiết lập kiểu font chữ, màu sắc và kích thước, …
Tạo danh sách gạch đầu dòng (đánh số hoặc ký tự)
Tạo bảng
Căn chữ, căn lề, …
Nhúng link ảnh, link phim, flash hoặc các tập tin media.
Chỉnh sửa HTML trực tiếp nếu muốn.

Nếu nói về tính phổ biến của 1 số html WYSIWYG editor hiện này thì người ta thường nghĩ ngay tới CKeditor hay Tinymce.Không chỉ đẹp, phong phú về giao diện, đầy đủ về tính năng mà khả năng mở rộng, tương thích của chúng với nhiều mã nguồn, framework hiện nay cũng như dễ dàng để tích hợp chúng vào trang web của bạn

Tuy nhiên, có một số trường hợp mình lại ít khi dùng tinymce bởi dùng khi nhúng vào website, chúng khá nặng. Mình lại thích kiểu đơn giản, ví dụ trong trường hợp sử dụng cho khung bình luận của website chẳng hạn. Mình sẽ ưu tiên 1 số edior WYSIWYG nhẹ nhàng hơn.

Cách cài đặt chung của các WYSIWYG editor

Hầu hết các HTML WYSIWYG này đều có 1 cách cài đặt chung đơn giản như sau:

Bước 1: Tải về file source (Js, css, images) của chúng ( Hoặc include từ link CDN). Sau đó include script, stylesheet vào phần header hoặc footer của website.

Bước 2: Xác định id của input text, textarea hoặc content editable mà bạn muốn biến chúng thành WYSIWYG. Sử dụng funtion mà các editor đó hỗ trợ để replace chúng thành WYSIWYG editor

Các WYSIWYG khuyên dùng

Mình sẽ không sắp xếp theo tính phổ biến, do đó mà mình sẽ đặt Ckeditor hay Tinymce ở cuối cùng vì chúng quá phổ biến và ai cũng biết rồi

1. NicEdit

Đặc điểm nổi bật

Rất nhẹ và dễ dàng tích hợp.
Dễ dàng custom giao diện.

Cách cài đặt.

Các bạn vào trang chủ của nó để tải source code mới nhất về: http://nicedit.com/download.php hoặc sử dụng link js có sẵn.
Chèn script vào header của website:
Chèn thêm đoạn này để khởi tạo nicEdit

Một ví dụ đầy đủ như sau



  WYSIWYG editor với nicEditor  

  



  Simple textarea  
        Đây là nội dung

2. MooEditable

Tuy rằng cái editor này đã khá lâu, không được cập nhật và hỗ trợ nữa nhưng mình thấy nó khá là đơn giản. Phù hợp để các bạn sử dụng cho phần bình luận trên website

Các bạn có thể thử sử dụng nó qua demo này: http://cheeaun.github.io/mooeditable/

Tìm hiểu thêm về các chức năng nó hỗ trợ ở trang document: http://cheeaun.github.io/mooeditable/docs.html

3. jHtmlArea

Nhiếu người nhận xét giao diện thằng này hơi xấu. Nhưng mình thì lại thấy nó đơn giản, đủ xài. Nếu cần đẹp thì các bạn có thể css lại xóa border của nó đi hoặc thay thế các icon button chẳng hạn.

Trải nghiệm và sử dụng nó tại Link: http://pietschsoft.com/demo/jHtmlArea/

4. wiris

Nếu nói về soạn thảo công thức toán học Latex hay công thức hóa học trực tiếp trên website thì có lẽ ở thời điểm hiện tại. Chưa có cái editor nào vượt mặt được wiris. Dễ dàng cài đặt, dễ sử dụng, đầy đủ ác loại công thức có lẽ là những nhận xét tổng quát về nó.

Nếu không thích gõ, hay click vào các công thức, bạn cũng có thể viết( vẽ) bằng tay. Wiris sẽ nhận dạng chúng và hiển thị đúng nhất với mong muốn của bạn.

5. quilljs

Trang chủ: https://quilljs.com/

Mình khá thích giao diện của quilljs, có hỗ trợ dạng giao diện inline giống medium rất đẹp. Các chức năng đủ dùng, có hỗ trợ gõ công thức toán học Latex. Cài đặt cũng chỉ cần include 1 file js mà thôi

6. Ckeditor

Đã quá nổi tiếng rồi nên mình sẽ không cần phải giới thiệu gì thêm nữa. Ngoài chức năng soạn thảo thì nó còn hỗ trợ thêm các plugin tải file và quản lý file rất mạnh mẽ, trong đó phải kể tới CkfinderCkfinder

Tuy nhiên như mình đã đề cập ở ban đầu, cái gì mà hỗ trợ quá nhiều chức năng thì rất là nặng, sẽ làm giảm tốc độ website của bạn. Do đó, bạn hãy cân nhắc khi sử dụng, nếu thật sự cần hỗ trợ nhiều định dạng cho khung soạn thảo thì mới sử dụng chúng. Còn nếu chỉ cần 1 số định dạng cơ bản thôi thì hãy sử dụng những editor khác ở trên.

7. Tinymce

Đây có lẽ là đối thủ hiện tại của CKEditor, hầu hết những chức năng CKeditor có thì Tinymce cũng có.

programming html WYSIWYG HTML editor React wysiwyg WYSIWYG editor CKEditor HTML editor net WYSIWYG Web Builder TinyMCE CKEditor HTML

Hướng dẫn wysiwyg html editor - wysiwyg trình soạn thảo html

Lợi ích và hạn chế của HTML Editor

Sử dụng Blogspot HTML Editor với 4 bước đơn giản

Cách cài đặt chung của các WYSIWYG editor

Các WYSIWYG khuyên dùng

1. NicEdit

Simple textarea

2. MooEditable

3. jHtmlArea

4. wiris

5. quilljs

6. Ckeditor

7. Tinymce

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội