修改頁面內容- HTML5 中的 execCommand 指令

前面提到的 contenteditable 與 designMode 可以搭配 HTML5 中的 execCommand 指令會更好玩，用來讓網頁選取位置產生變化,如: 文字處理(複製、貼上、剪下)、排版(對齊、編號、上下標)、變更字型與大小等等...

完整參數: document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
說明：

• aCommandName: 要用來改變的內容
• aShowDefaultUI(optional): 是否顯示 UI(boolean)
• aValueArgument(optional): 對應 aCommandName 要設置的值

當我們把區塊設定為可以編輯時，就可以利用 execCommand 來修改內容了。

這裡我們準備一個可以編輯的區塊來試看看，把要編輯的區塊加上 contenteditable：

接著在頁面上增加兩個按鈕，分別來做把選取內容加粗跟變色，然後再點下去的時候執行 document.execCommand

$("#color").click(function () {
        document.execCommand('foreColor', false, "blue");
    })
    $("#bold").click(function () {
        document.execCommand('bold');
    })

這樣我們就能在上面那個看到當我們把內文選取起來，只要點變色會變粗，選取的內容就會跟著變化了。

execCommand 可以使用的值有以下這些：

• 前景色: document.execCommand('ForeColor',false,'#ff0000');
• 背景色: document.execCommand('BackColor',false,'#ff0000');
• 文字剪下: document.execCommand('Cut');
• 文字複製: document.execCommand('Copy');
• 文字貼上: document.execCommand('Paste');
• 對齊左: document.execCommand('justifyleft');
• 對齊中: document.execCommand('justifyleft');
• 對齊右: document.execCommand('justifyleft');
• 等寬對齊: document.execCommand('justifyFull');
• 粗體字: document.execCommand('bold');
• 斜體字: document.execCommand('italic');
• 底線: document.execCommand('underline');
• 刪除線: document.execCommand('strikethrough');
• 變更字型: document.execCommand('fontname');
• 變更大小: document.execCommand('fontsize');
• 右縮: document.execCommand('indent');
• 左縮: document.execCommand('outdent');
• 編號: document.execCommand('orderedlist');
• 標號: document.execCommand('unorderedlist');
• 建立連結: document.execCommand('createlink');
• 取消連結: document.execCommand('unlink');

要看更完整的可以看Document.execCommand()。

如果增加的內容要讓使用者可以自訂，可以參考以下做法(用 createlink 當範例)

var linkURL = prompt('Enter a URL:', 'http://');
document.execCommand('createlink', false, linkURL);

看起來應該是能夠自己製作一個編輯器，不過我們應該也都很習慣用一些現成的外掛了，這個 API 就用來參考一下吧。