HTML – Thuộc tính DesignMode và ContentEditable

Mercury Editor - HTML 5Trước đây, bạn có thể cho phép người dùng chỉnh sửa trực tiếp trang web trên trình duyệt bằng cách gán thuộc tính designMode = “on”. Tuy nhiên thuộc tính này chỉ sử dụng được với đối tượng document. Điều này khá bất tiện, do đó HTML 5 bổ sung thêm một thuộc tính mới là contentEditable, giúp bạn có thể thiết lập chế độ chỉnh sửa trang cho các thành phần riêng lẻ mà không làm ảnh hưởng đến toàn bộ trang.

Sử dụng chế độ design của tài liệu HTML, bạn có thể thao tác chỉnh sửa như trong một phần mềm soạn thảo WYSIWYG. Bạn có thể kéo thả, sao chép, cắt, dán, dùng các phím tắt,… Ví dụ: bạn có thể giữ Alt và kéo thả để copy một button trong Firefox, nhấn Ctrl+Z để undo và Ctrl+Y để redo.

DesignMode

Bởi vì thuộc tính này chỉ dùng được cho đối tượng document, nên nếu muốn giới hạn cho một vùng của trang, bạn cần phải sử dụng một thẻ IFRAME. Thẻ này sẽ nạp nội dung mà bạn cần cho phép người dùng chỉnh sửa:

// Javascript
window.onload=function(){
	var iframe = document.getElementById("content_iframe");
	iframe.contentWindow.document.designMode="On";
};

<!—HTML -->
<iframe id="content_iframe" src="iframe_data.html">
</iframe>

ContentEditable

Thuộc tính này bạn có thể thêm vào bất kì thẻ nào trong một trang HTML. Giá trị của nó gồm có:

False: nội dung không thể được sửa đổi.

True: nội dung có thể sửa đổi.

Inherit: Mặc định, giá trị true hoặc false tùy vào thành phần cha chứa nó.

<html>
<head>
<script>
window.onload=function(){
	var pre1= document.getElementById("pre1");
	pre1.contentEditable=true;
};
</script>
</head>
<body >
<div contentEditable >This is the editable content region.</div>

<pre id="pre1">
"I should of listened closer.
I should of let go of my sins sooner.
I should of made contact with your soul."</pre>

</body>
</html>

Xem Demo một ví dụ tương tự.

Lưu lại nội dung chỉnh sửa

Bạn có thể bổ sung một button để kích hoạt một hàm sử dụng ajax để gửi dữ liệu và lưu lại trên server. Hoặc có thể bắt các sự kiện bàn phím như keypress, hoặc cũng có thể setTimeout() để lưu theo thời gian.

Nội dung mà bạn cần lưu là mã HTML của phần tử được chỉnh sửa được lấy thông qua thuộc tính innerHTML.

Ứng dụng?

Bạn có thể thắc mắc là sử dụng phương pháp này có ưu điểm gì và khác gì các textbox hay textarea? Một điều dễ nhận thấy là textbox và textarea không cung cấp cho bạn khả năng WYSIWYG. Tức là bạn không thể định dạng nội dung của tài liệu mà chỉ có thể chỉnh sửa nội dung thuần văn bản.

baby-yawn

Câu trả lời là những người muốn tạo một ứng dụng HTML Editor trực quan trên nền web. Như bạn thấy, trình duyệt đã cung cấp sẵn một editor rất hiệu quả, vấn đề là làm sao để tận dụng và phát triển được nó. Việc này có khó không? Tùy vào mức độ của ứng dụng mà bạn muốn tạo ra. Với trình độ cơ bản nhất, bạn cũng có thể tạo cho mình một editor với các nút lệnh của toolbar chỉ bằng vài dòng javascript.

Một trong ví dụ khá đầy đủ chức năng mà tôi muốn giới thiệu là Mercury Editor. Ứng dụng này cho phép người dùng có thể thao tác với media, hình ảnh, table,…Mặc dù chức năng save chưa được cung cấp nhưng nó giúp bạn thấy được nội dung json được tạo ra để gửi lên server.

Địa chỉ: http://jejacks0n.github.com/mercury/#

Mercury Editor - HTML 5

Ngoài ra, bạn có thể tìm thấy rất nhiều editor sử dụng tính năng này của HTML 5. Ví dụ như:

YinYang’s Programming Blog

Advertisements

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 Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s