Rich Text Editor - soạn thảo với phong cách mới

 

Nếu bạn nào đã sử dụng qua một chương trình soạn thảo văn bản nào đó, hẳn sẽ không còn lạ gì những công cụ căn chỉnh bài viết, chỉnh sửa font chữ, màu sắc, hình ảnh... Còn nếu bạn chưa sử dụng thì việc làm quen với các chức năng đó cũng không có gì là khó, chỉ cần bạn bỏ chút thời gian ra tìm hiểu là sẽ sử dụng được ngay. Các nút ở thanh công cụ hầu hết được minh họa để thể hiện khá rõ chức năng của chúng.

 

 

 

Bạn sẽ thấy là trình soạn thảo rich text cho phép bạn làm được hết tất cả những gì mà các thẻ bbcode của trình soạn thảo trước có thể làm (& còn hơn thế rất nhiều), nhưng nếu muốn thì bạn vẫn có thể sử dụng các thẻ bbcode ngay trong trình soạn thảo rich text bằng cách gõ tay (link tới bảng liệt kê các thẻ bbcode vẫn ở ngay bên dưới bảng mặt cười bên trái trình soạn thảo)

 

• Trước đây sử dụng thẻ bbcode “media” để chèn nhạc vào bài viết, bạn không thể điều chỉnh chiều rộng, chiều cao của chương trình Windows Media Player trong bài viết, nhưng sử dụng nút chèn nhạc trên thanh công cụ trình soạn thảo rich text, bạn có thể hoàn toàn điều chỉnh kích thước của trình chơi nhạc. VD:

• Trước đây sử dụng thẻ bbcode “url” để thêm link vào bài viết, khi người xem click vào link đó, trình duyệt sẽ mở ra một cửa sổ mới để truy cập vào link đó – bạn không thể thay đổi gì. Nhưng với công cụ thêm link vào bài viết của rich text, bạn có thể lựa chọn để khi người dùng rê chuột qua link, một giới thiệu nhỏ sẽ xuất hiện (vd: rê chuột lên trên link này ), rồi khi click chuột trình duyệt sẽ mở cửa sổ mới để vào địa chỉ đó hay là vào thẳng bằng cửa sổ hiện giờ. Không những thế, bạn còn có thể để link tới một đoạn bất kỳ (được bookmark) trong bài viết của bạn (vd: click vào các link trong phần “Nội dung bài viết” ở ngay đầu bài viết này, bạn sẽ được đưa tới các đoạn tương ứng của bài viết ), thậm chí bạn có thể link tới một đoạn nào đó trong một bài viết khác trên blog của bạn (vd: click vào đây).
• Trước đây bạn có thể điều chỉnh kích cỡ ảnh với thẻ bbcode “imgresize”, nhưng không thể thay đổi tỉ lệ chiều ngang/dọc của ảnh. Với trình soạn thảo rich text, bạn có thể kéo to thu nhỏ ảnh tùy ý theo bất kỳ chiều nào. Trước đây bạn cũng không thể để ảnh ở bên cạnh một đoạn text, thì giờ việc đó đã có thể làm được. Ảnh ở bên cạnh đoạn này là một ví dụ.
• Nếu biết một chút HTML để chỉnh sửa trực tiếp mã HTML của bài viết, bạn có thể làm rất nhiều thứ khác, như đặt ảnh nền / màu nền cho riêng một đoạn trong bài viết (đoạn này là ví dụ), format chữ cái đầu tiên của đoạn (như ở đoạn đầu các phần trong bài này), chia bài viết làm hai cột, tạo hiệu ứng cho chữ, thay đổi con trỏ… bạn cũng có thể thực hiện các chức năng mà các thẻ bbcode thực hiện, như thẻ “spoiler” (ẩn một đoạn trong bài viết), thẻ “div” (lồng khung một đoạn trong bài viết), thẻ “web” (lồng một trang web khác vào bài viết), hay thẻ “move”, “up” (di chuyển nội dung sang trái / lên trên )…
• Bạn cũng có thể tạo một khối, trong đó có một form để người xem chọn danh mục bài viết trong blog mà họ muốn xem (nhưng bạn phải biết chút ít HTML mới làm được). VD: khối “Danh mục bài viết” trong blog này.

 

Tóm lại là bạn có thể trình bày nội dung bài viết một cách linh hoạt như hầu hết các trang web mà bạn vào thường ngày (trừ các tính năng sử dụng javascript).

Ngoài ra, với rich text, khi bạn copy nội dung ở một trang web khác vào trình soạn thảo, thì format, link… của nội dung đó sẽ được giữ nguyên! Chẳng hạn nếu bạn thấy trên một trang web nào đó có một đoạn text màu đỏ, font chữ Arial, kiểu chữ in nghiêng, căn đều hai bên, trong đoạn đó có một số link & một số hình ảnh… thì bạn chỉ việc bôi đen đoạn đó, nhấn Ctrl + C để copy, rồi trở lại trình soạn thảo rich text, click con trỏ vào trong trình soạn thảo & nhấn Ctrl + V để dán, thì đoạn văn bản đó – kèm theo màu chữ, font chữ, các link, hình ảnh… cũng sẽ được copy y nguyên vào trình soạn thảo của bạn. Bạn sẽ ko phải mất thời gian thêm link, chèn ảnh… vào nội dung bài viết.

Chú ý: Không phải với trang web nào bạn cũng có thể copy y nguyên format được như trên (vì có thể nội dung của họ được format với các lớp trong CSS của họ). Nhưng ít ra bạn có thể copy được link, hình ảnh, bảng tính… và việc format còn lại cũng ko mất nhiều thời gian.

 

Bạn cũng có thể soạn thảo trong chương trình Words quen thuộc trên máy tính, thực hiện hết các tác vụ format trong đó, rồi copy và dán vào trình soạn thảo rich text trên blog (có thể phải chỉnh sửa một vài chỗ).

 

Lý do:

 

Tóm lại bạn chỉ cần nhớ là bài viết nào đã được tạo hoặc chỉnh sửa với trình soạn thảo rich text thì sau này cũng chỉ dùng rich text để chỉnh sửa bài đó thôi.

Ngoài ra, khi sử dụng trình soạn thảo rich text, nếu bạn tự format bài viết của mình thì thường không có vấn đề gì, nhưng nếu bạn copy bài viết đã được format từ một trang web nào đó, thì có thể sẽ có những lúc nội dung bài viết làm hỏng khối bài viết và cả bố cục trên blog của bạn (chẳng hạn làm cho khối này bị kéo sang ngang hết màn hình, hay làm cho các khối bên cạnh bị chuyển hết xuống phía dưới trang web...). Nguyên nhân là do nội dung mà bạn copy từ trang web khác có kèm theo format của những khối không hoàn chỉnh trên trang web đó, hoặc tự bản thân chúng có quy định chiều rộng của nội dung --> những format này sẽ làm hỏng bố cục trên blog của bạn (vì tất cả đều là HTML - nên HTML của nội dung bài viết hoàn toàn có thể làm sai lệch các thông tin HTML của blog bạn...).
Cách khắc phục: Bạn hãy chỉnh sửa bài viết mà làm sai bố cục blog đó: tốt nhất là hãy copy những nội dung từ trang web mà bạn cần copy đó sang một file text (trong Windows click phải vào desktop, chọn New -> Text Document). Sau đó mới copy nội dung từ file text đó vào trình soạn thảo (việc này nhằm loại bỏ hết các format trong nội dung từ trang web kia đi). Rồi bạn hãy tự format lại nội dung sử dụng các công cụ của trình soạn thảo rich text...

- Mở rộng trình soạn thảo hết cửa sổ trình duyệt: Nếu bạn thấy trình soạn thảo nhỏ quá & muốn mở rộng ra, bạn chỉ cần click vào nút Full Screen

- Để chèn flash vào bài viết, bạn nhấn vào biểu tượng Flash Trong cửa sổ popup, nhập link flash vào phần Source. Bạn chưa cần phải nhập thông số kích thước chiều ngang và chiều cao ngay (width, height), sau khi chèn flash vào trình soạn thảo, bạn có thể dùng chuột để kéo chỉnh các chiều này cho phù hợp.

- Để chèn nhạc, clip vào bài viết, bạn nhấn vào biểu tượng Media Cũng như với flash, nhập link nhạc vào phần Source. Sau khi chèn nhạc vào bạn có thể dùng chuột để chỉnh kích thước trình chơi nhạc.

 

- Cách chèn các link vào bài viết:

 

1. Chèn một link bình thường: trước hết bạn bôi đen đoạn chữ mà bạn muốn chèn link vào rồi click biểu tượng Hyperlink một cửa sổ popup sẽ hiện ra:

 

 

Dòng Source có 2 phần: phần 1 chọn giao thức (http://, mailto:...), phần sau điền địa chỉ link (vd: www.vnvista.com, [email protected] …). Ở dòng Target có hai phần, bạn chỉ cần quan tâm phần thứ 2: chọn Self nếu bạn muốn người xem mở link trong cửa sổ hiện tại, chọn Blank nếu bạn muốn người xem mở link trong một cửa sổ mới (nếu bạn link tới một site khác, ko phải trong blog bạn thì nên chọn Blank – để người xem không bị rời khỏi blog của bạn khi click vào link đó). Ở dòng Title điền nội dung mà bạn muốn xuất hiện khi người xem rê chuột lên trên link.

2. Chèn link tới một đoạn nào đó trong bài viết: Đầu tiên bạn phải đi tới đoạn văn bản trong bài viết mà bạn muốn người xem khi click vào sẽ được chuyển tới. Bôi đen một vài từ đầu tiên của đoạn đó, rồi click vào biểu tượng Bookmark Ở dòng Name viết tên bookmark (thẻ đánh dấu) cho đoạn đó rồi nhấn insert (vd: doan1, doan2... - ko sử dụng tiếng Việt có dấu). Sau đó trở lại nơi bạn muốn chèn link tới đoạn đó, click biểu tượng Hyperlink đánh dấu vào hộp kiểm Bookmark, rồi chọn tên đoạn đã được bookmark mà bạn muốn link này trỏ tới. Rồi cũng như ở phần trên, chọn Target & nhập Title cho link.

 

3. Chèn link tới một đoạn nào đó trong một bài viết khác: Trước hết ở bài viết đó bạn phải chèn một bookmark vào đoạn mà link cần trỏ tới. Chẳng hạn đặt tên bookmark đoạn đó là “doan3”. Giờ bạn copy địa chỉ của bài viết đó (vd: http://vnvista.com/i-shine/index.php?cmd=showentry&eid=13178 ), rồi thêm vào sau đó #doan3 --> Bạn được: http://vnvista.com/i-shine/index.php?cmd=showentry&eid=13178#doan3 Đây chính là link tới đoạn mà bạn đánh dấu trong bài viết đó. Giờ bạn chỉ việc trở lại trình soạn thảo cho bài viết mà bạn đang soạn, chèn link này vào (cách làm như là chèn 1 link bình thường đã hướng dẫn ở trên).

 

- Để chèn ảnh vào nội dung bài viết, trước hết để con trỏ vào nơi bạn muốn chèn ảnh rồi click vào công cụ Image Một cửa sổ popup sẽ hiện ra. Phần Source nhập link tới ảnh. Phần Title nhập nội dung mà bạn muốn hiện ra khi người xem rê chuột lên / cũng là dòng chữ sẽ xuất hiện thay thế khi ảnh ko hiển thị được (vd: link ảnh bị die hay thời gian load quá lâu). Phần Alignment cho phép bạn chọn sắp xếp ảnh bên trái / phải, trên / dưới / giữa… Click vào nút Border Style nếu bạn muốn thêm đường viền cho ảnh. Phần Width , Height (chiều ngang, dọc) thì ko cần phải điền (bạn có thể dùng chuột để kéo các chiều ảnh cho phù hợp). Ở phần Spacing bên tay phải, bạn nhập khoảng cách tính bằng pixel giữa ảnh với nội dung xung quanh (khoảng cách với nội dung bên trên – Top, nội dung bên phải – Right…). VD: ảnh ở bên cạnh đoạn này có Title là “Ảnh demo” (thử rê chuột qua ảnh một lúc bạn sẽ thấy), Allignment là left, Spacing – Right là 10px, Bottom 10px (để ảnh không bị sát vào với chữ), và có sử dụng Border (đường viền) như bạn thấy đó.

- Với các công cụ để format chữ như màu chữ Foreground Color , màu nền Background Color , kiểu chữ đậm , nghiêng , gạch chân , gạch ngang , chữ bên trên , bên dưới , font chữ , kích thước chữ thì bạn phải bôi đen đoạn văn bản mà bạn muốn format, rồi mới dùng các công cụ đó để điều chỉnh.

- Với các công cụ để format đoạn văn như công cụ căn chỉnh lề trái / phải / giữa / cách đều , lập danh sách , thụt đoạn văn sang trái / phải , soạn từ trái sang phải / phải sang trái , kiểu đoạn văn bản … thì bạn chỉ cần để con trỏ vào một vị trí trong đoạn văn bản bạn muốn điều chỉnh rồi nhấn vào các công cụ đó để điều chỉnh.

- Công cụ Styles & Formatting cho phép chỉnh sửa các thành phần khác nhau như format chữ (Text Formatting), format đoạn văn bản (Paragraph Formatting), format danh sách (List Formatting), format các khối trong bài viết (Box Formatting) (chú ý: một đoạn văn bản bất kỳ cũng được coi là một khối), sử dụng CSS của riêng bạn (Custom CSS).

- Nếu bạn muốn xóa hết bài viết đi để soạn thảo lại từ đầu thì hãy click biểu tượng Clear All

- Nếu bạn biết HTML và muốn trực tiếp chỉnh sửa mã HTML thì hãy click vào biểu tượng View/Edit Source