修改頁面內容- 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 就用來參考一下吧。