Bộ soạn thảo WYSIWYG là tên gọi chung cho loại chương trình giúp soạn thảo văn bản, chọn phông chữ, định dạng... với chức năng chính là giúp người dùng thuận tiện hơn trong việc xử lý văn bản.

Bước 1: Tải và cài đặt WYSIWYG vào trang Web:

Trước tiên bạn cần tải mã nguồn của thành phần WYSIWYG, rồi giải nén tập tin zip để được thư mục htmlArea. Sau đó, copy các thư mục image, popups và editor.js trong htmlArea vào thư mục Web của bạn (cùng thư mục với trang Web cần nhúng bộ soạn thảo).

Bước 2: Nhúng bộ soạn thảo vào Web:

Tiếp đến, mở tập tin HTML cần nhúng bộ soạn thảo bằng Notepad hoặc bất kì trình soạn thảo, Web nào khác. Thêm đoạn mã 1 vào giữa cặp thẻ .

Đoạn mã 1:

Code:

<script language="Javascript1.2">   
_editor_url = "";   
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);   
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0;}   
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0;}   
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0;}   
if (win_ie_ver >= 5.5)   
{   
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');   
document.write(' language="Javascript1.2"></scr' + 'ipt>');   
}   
else { document.write('<scr'+'ipt>function editor_generate() 
{ return false; }</scr'+'ipt>'); }   
</script>

Để tạo ra bộ soạn thảo gồm các chức năng mặc định thì chỉ cần thêm đoạn mã 2 tạo TextArea và đoạn mã 3 vào giữa thẻ .
Đoạn mã 2:


Đoạn mã 3:

Code:

<script language="JavaScript1.2" defer>   
editor_generate('TxtArea');   
</script>

Nếu muốn thêm bớt các nút chức năng, bạn thay đoạn mã 3 bằng đoạn mã 4, rồi thêm bớt các nút trong mảng config.toolbar, thêm bớt phông ở mảng config.fontnames, thay đổi phông, màu, kích cỡ chữ ở dòng:
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';

Đoạn mã 4:

Code:


<script language="JavaScript1.2" defer>   
var config = new Object();   
config.width = "90%";   
config.height = "200px";   
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';   
config.debug = 0;   
config.toolbar = [['fontname'],['fontsize'],['fontstyle'],['linebreak'],['bold','italic','underline','separator'],['strikethrough','subscript','superscript','separator'],['justifyleft','justifycenter','justifyright','separator'],['OrderedList','UnOrderedList','Outdent','Indent','separator'],   
['forecolor','backcolor','separator'],['custom1','custom2','custom3','separator'],['HorizontalRule','Createlink','InsertImage','htmlmode','separator'],['about','help']];   
config.fontnames = {   
"Arial": "arial, helvetica, sans-serif",   
"Courier New": "courier new, courier, mono",   
"Georgia": "Georgia, Times New Roman, Times, Serif",   
"Tahoma": "Tahoma, Arial, Helvetica, sans-serif",   
"Times New Roman": "times new roman, times, serif",   
"Verdana": "Verdana, Arial, Helvetica, sans-serif",   
"impact": "impact",   
"WingDings": "WingDings" 
};   
config.fontsizes = {   
"1 (8 pt)": "1",   
"2 (10 pt)": "2",   
"3 (12 pt)": "3",   
"4 (14 pt)": "4",   
"5 (18 pt)": "5",   
"6 (24 pt)": "6",   
"7 (36 pt)": "7" 
};   
editor_generate('TxtArea',config);   
</script>