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ệuCó 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])
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:
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ảnTô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,'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 |
Javascript –Phương thức exeCommand và WYSIWYG Html Editor
Ý kiến bạn đọc
Tin tức khác
jQuery – Hướng dẫn tổng quan về jqGrid Plugin
- 22/2/2013
Javascript – Tạo chuyển động với WindowAnimationTiming API
- 20/4/2012
Javascript – Dump đối tượng dưới dạng HTML table
- 5/4/2012
jQuery – Tạo Vertical Collapsible Navigation Menu
- 5/4/2012
jQuery plugin – Turn.js: Hiệu ứng lật trang cho HTML5
- 5/4/2012
HTML – Sử dụng Character Entity
- 5/4/2012
HTML – Thuộc tính DesignMode và ContentEditable
- 4/4/2012
Javascript – Tạo script động và kĩ thuật JSONP
- 4/4/2012
jQuery – Các đoạn mã (snippet) hữu ích
- 2/4/2012
jQuery – Hiệu ứng Tooltip di chuyển theo chuột
- 2/4/2012
Tin tiêu điểm
-
Tạo tab menu cơ bản sử dụng jQuery UI (13,201)
-
jQuery plugin – Turn.js: Hiệu ứng lật trang cho HTML5 (13,131)
-
[Tìm hiểu jQuery căn bản] Bài 3. Cú pháp trong jQuery (10,368)
-
jQuery – Hướng dẫn tổng quan về jqGrid Plugin (10,286)
-
Jquery Paging - Phân trang với jQuery Pagination Plugin (9,072)
-
jQuery – Tạo một Image Slide Show đơn giản (8,881)
-
15 jQuery slideshow bạn không nên bỏ qua (8,872)
-
jQuery – Tạo cửa sổ popup đơn giản (8,763)
-
jQuery – Hiệu ứng Tooltip di chuyển theo chuột (8,719)
-
25 Jquery Slider tuyệt đẹp cho bạn (8,186)
Gallery
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
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Tags
asp.net
JavaScript
Lập trình
Cơ sở dữ liệu
jquery
Csharp
Ajax
Thủ thuật
JavaScript
menu
Sql Server
Lập trình C#
WebService
stty
Sql
Phân trang
Rewrite
Mã hoá
Backup
Thủ thuật lập trình
Store procedure
Accordion
Validation
Store
Upload
Slide
jQueryPlugin
StoreProcedure
Regular Expression
Regex
android
Quick and snow
HTML5
WPF
WCF
Copyright © 2011 - 2012 vietshare.vn
by
phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.