exeCommand() là một phương thức giúp thực thi các lệnh tương tự trong một trình soạn thảo văn bản. Lệnh được thực thi sẽ tác động đến nội dung hiển thị trên cửa sổ trình duyệt. Đây là phương thức rất hữu ích dùng để tạo ra các HTML Editor hỗ trợ định dạng và chỉnh sửa mã nguồn mà bạn thường gặp trên các trang web.
Giới thiệu
Có nhiều điểm khác nhau khi sử dụng phương thức này trong mỗi trình duyệt. Một số lệnh mặc dù được hỗ trợ bởi các trình duyệt, tuy nhiên cách chúng hoạt động lại có thể khác nhau. Trước tiên ta hãy tìm hiểu cách sử dụng phương thức này.
Cú pháp:
success = object.execCommand(command [, userInterface] [, value])
| command | Chuỗi xác định tên lệnh sẽ thực thi. Tham khảo các giá trị của tham số này tại Command Identifiers. |
| userInterface | Kiểu boolean.false: Mặc định. Không hiển thị giao diện người dùng. (Tham số này chưa được hỗ trợ bởi một số trình duyệt)true: Hiển thị giao diện người dùng nếu lệnh hỗ trợ. |
| value | Dữ liệu cần để sử dụng khi thực thi lệnh. |
Phương thức này trả về giá trị true nếu như thực thi lệnh thành công, ngược lại là false.
Ví dụ: Làm đậm vùng văn bản được chọn trong trình duyệt bằng câu lệnh:
document.execCommand(‘bold’) ;
Trong các trình duyệt, bạn cần cho phép người dùng có thể hiệu chỉnh nội dung của vùng mà lệnh tác động (bằng thuộc tính contentEditable hoặc designMode). Tuy nhiên trong IE, các lệnh có thể được áp dụng lên những vùng read-only của trang.
Để biết trình duyệt có hỗ trợ lệnh cần thực hiện không, bạn có thể dùng phương thức queryCommandSupported(sCommand). Phương thức này trả về giá trị true nếu như trình duyệt hiện tại hỗ trợ lệnh được truyền trong tham số.
Vì vậy, có thể viết một phương thức thực thi lệnh để thông báo cho người dùng
<script >
function doCmd(command,userInterface,value)
{
if(document.queryCommandSupported(command))
document.execCommand(command,userInterface,value);
else
alert("The '"+command+"' command is not supported in this browser");
}
</script>
Ví dụ: Một HTML editor đơn giản
Tôi tạo một editor cơ bản với vài nút lệnh và bổ sung thêm chức năng chuyển đổi qua lại giữa hai chế độ hiển thị source code HTML và WYSIWYG. Để hiển thị được nội dung HTML lên trình duyệt, bạn cần mã hóa các kí tự đặc biệt như <, >, “,…
Lưu ý: để hiển thị được giao diện với nút lệnh URL, bạn cần sử dụng IE để xem ví dụ này.
Giao diện:
<html>
<head>
<style>
.toolbar{
width: 400px;
border:1px solid gray;
background: Lavender;
margin-bottom:2px;
box-shadow: 1px 1px 1px 3px #ccc;
border-radius: 3px;
}
.editor {
width: 400px;
height: 400px;
box-shadow: 3px 3px 3px 3px #ccc;
}</style>
<script type="text/javascript">
var html="";
window.onload=function()
{
document.getElementById("checkbox1").checked=false;
}
function encode(content)
{
var s=content;
s=s.replace(/&/g,"&");
s=s.replace(/"/g,""");
s=s.replace(/'/g,"'");
s=s.replace(/</g,"<");
s=s.replace(/>/g,">");
return s;
}
function showSource(sender)
{
var editor=document.getElementById("editor");
if(sender.checked)
{
html=editor.innerHTML;
console.log(html);
editor.innerHTML=encode(html);
}else
{
editor.innerHTML=html;
}
}
function doCmd(command,userInterface,value)
{
if(document.queryCommandSupported(command))
document.execCommand(command,userInterface,value);
else
alert("The '"+command+"' command is not supported in this browser");
}
</script>
<title>Simple HTML Editor</title>
</head>
<body>
<div class="toolbar">
<input id="checkbox1" type="checkbox" onchange="showSource(this);">Source</input>
<button onclick="doCmd('undo');">Undo</button>
<button onclick="doCmd('redo');">Redo</button>
<button onclick="doCmd('delete');">Delete</button>
<button onclick="doCmd('bold');">B</button>
<button onclick="doCmd('italic');">I</button>
<button onclick="doCmd('underline');">U</button>
<button onclick="doCmd('CreateLink',true,'https://yinyangit.wordpress.com');">URL</button>
</div>
<div id="editor" contentEditable class="editor">
<b>Happy New Year Wish</b>
<pre>
My Happy New Year wish for you
Is for your best year yet,
A year where life is peaceful,
And what you want, you get.
...
</pre>
<i>Joanna Fuchs</i>
</div>
</body>
</html>
Happy Lunar New Year 2012.
All the best!
Yin Yang’s Programming Blog
YinYang's Programing Blog 
YinYang ơi em có 1 đoạn Code này em kô hiểu sao kết quả cuối cùng em thu đc lại là
10
The script in the body section calls a function with two parameters (4 and 3).
The function will return the product of these two parameters.
function product(a)
{
a=0;
Dance:
for(var i=0;i 6)break Dance;
}
return a;
}
var z= 1990;
document.write(product(z));
The script in the body section calls a function with two parameters (4 and 3).
The function will return the product of these two parameters.
Hix anh xem cái hình này cho rõ anh ơi sao toán tử so sánh kiểu gì lại lạ vậy nhỉ
Hàm product() của bạn viết hơi lạ, cấu trúc không đúng, bạn thử viết lại bằng cách cho vào thẻ này xem:
[sourcecode language=”javascript”]
your code here
[/sourcecode]
Vâng em cám ơn, hix em ngồi nghĩ 30 phút cái hàm đơn giản mà kô ra, nhưng em bik mình sai ở đâu rồi, cám ơn Yin Yang đã trả lời cmt em sớm thế:|
Tại ý em thử viết 1 hàm xử lý thui:D ý của em là định cho a = a + 1; nhưng lại ghi là a = a+ i; nên em cữ nghĩ sai kết quả:(( hix 1 cái lỗi nhỏ vậy mà kô để ý. Xin lỗi đã làm phiền anh:D
anh ơi a có biết cái câu này trả lời thế nào không ạ? WYSIWYG là gì? bằng cách nào hẹ thống thực hiện được hiệu ứng này?
cảm ơn a