Chủ nhật, ngày 22 tháng 10 năm 2017

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

Ngày đăng: 9/3/2012, 8:44:45PM | Lượt xem: 1,564
Hot!
tag Editor, WYSIWYG,

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.

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,'http://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
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Tin tiêu điểm

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.