Phương thức HTML DOM execCommand()

Phương thức execCommand() thực thi một lệnh (command) được chỉ định trên đoạn nội dung có thể chỉnh sửa (editable section) đang được người dùng chọn. Thuộc tính document.designMode phải được đặt "on" để có vùng chỉnh sửa.

Cú pháp

document.execCommand(command, showUI, value)

• command: Tên lệnh cần thực thi (xem danh sách dưới).
• showUI (boolean): Có hiển thị giao diện người dùng cho lệnh hay không.
• value: Giá trị cho một số lệnh cụ thể (ví dụ: fontSize, foreColor).

Các giá trị phổ biến cho command:

"backColor", "bold", "createLink", "copy", "cut", "defaultParagraphSeparator",
"delete", "fontName", "fontSize", "foreColor", "formatBlock", "forwardDelete",
"insertHorizontalRule", "insertHTML", "insertImage", "insertLineBreak",
"insertOrderedList", "insertParagraph", "insertText", "insertUnorderedList",
"justifyCenter", "justifyFull", "justifyLeft", "justifyRight", "outdent",
"paste", "redo", "selectAll", "strikethrough", "styleWithCss", "superscript",
"undo", "unlink", "useCSS"

Ví dụ

Ví dụ định dạng văn bản khi double-click:

<!DOCTYPE html>
<html>
<body ondblclick="changeText()">
<h1>Ví dụ execCommand()</h1>
<h3>Double-click vào văn bản bất kỳ để thay đổi cỡ chữ và màu</h3>
<p>Đây là văn bản mẫu để click. Còn một số văn bản mẫu khác ở đây.</p>
<script>
  document.designMode = "on";
  function changeText() {
    document.execCommand("fontSize", true, "20px");
    document.execCommand("backColor", true, "lightgreen");
    document.execCommand("foreColor", true, "blue");
  }
</script>
</body>
</html>

Kết quả

Ban đầu trang có thể chỉnh sửa (designMode="on").

Khi double-click vào bất kỳ văn bản nào, đoạn văn bản đó sẽ chuyển cỡ chữ 20px, nền xanh nhạt, chữ xanh dương.

Giải thích

• document.designMode = "on" bật chế độ chỉnh sửa toàn trang.
• Sự kiện ondblclick trên body gọi changeText().
• Hàm thực thi 3 lệnh: fontSize, backColor, foreColor với giá trị tương ứng.
• Lệnh áp dụng lên vùng văn bản được chọn (highlight) tại thời điểm double-click.