Javascript –Phương thức exeCommand và WYSIWYG Html Editor

accessories-text-editorexeCommand() 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:

Simple HTML Editor

<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,"&amp;");
			s=s.replace(/"/g,"&quot;");
			s=s.replace(/'/g,"'");
			s=s.replace(/</g,"&lt;");
			s=s.replace(/>/g,"&gt;");
			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

Advertisements

4 thoughts on “Javascript –Phương thức exeCommand và WYSIWYG Html Editor

  1. 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.

    Trả lời
  2. 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

    Trả lời

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s