Richtext編輯模式(下)

上次介紹了如何建立Richtext輸入方塊和一個簡單的文字工具, 這次將會深入介紹execCommand方法來控制Richtext內容的輸入.

STEP 1: 上次的最後一個範例

上次小弟介紹過在文字旁邊加上HTML標籤來改變文字的樣式, 其實還有另外一種方法.

STEP 2: execCommand()方法

execCommand()方法是document物件下的方法, 他可以執行一些很常見的排版功能 (類似Word), 如文字置中, 設定文字顏色和更改文字字型等等都可以利用execCommand()來完成. 看看這個範例:

這個粗體功能和上一篇教學介紹的並沒有太大的差異, 只是寫法不太一樣.

這次的 setBold() 函式:

function setBold()
{
	test.focus();
	test.document.execCommand("bold");
}

沒錯, 就這麼一小段而已
設定為粗體本身是一個沒有參數的指令, 如果是要改變字型的話, 那就必須傳遞一個參數 (字型名稱).

如這個範例:

設定字型的函式:

function setFont(fontSelection)
{
	test.focus();
	test.document.execCommand("FontName","",fontSelection);
}

清單中選擇的字型名稱會經由fontSelection參數傳入execCommand()方法.
比較值得注意的一點就是...由於傳遞的是文字資料, 因此請略過第二個參數(將其留白), 使用第三個參數.

STEP 2: execCommand()的一些可用參數

範例:
如果參數名稱是fontname, 而參數是Verdana, 那即是 execCommand("fontname","","Verdana").

參數名稱	參數	說明
FontName	任何字型名稱 (如新細明體)	可以改變選取文字的字型這個指令用的是第三個參數 execCommand("ForeName","","字型名稱")
FontSize	從1到14的數字	可以改變字型的大小這個指令用的是第三個參數 execCommand("ForeSize","", 文字大小)
ForeColor	任何顏色數值 (#rrggbb)	可以改變前景(文字)的顏色這個指令用的是第三個參數 execCommand("ForeColor","","顏色名稱")
Bold	沒有參數	將選取的文字改為粗體
Italic	沒有參數	將選取的文字改為斜體
Underline	沒有參數	將選取的文字加上底線
JustifyLeft	沒有參數	將選取的文字置左
JustifyCenter	沒有參數	將選取的文字置中
JustifyRight	沒有參數	將選取的文字置右
Outdent	沒有參數	減少縮排
Indent	沒有參數	增加縮排
InsertOrderedlist	沒有參數	設定為編號清單
InsertUnorderedlist	沒有參數	設定為項目清單
CreateLink	沒有參數	加入超連結
Cut	沒有參數	剪下
Copy	沒有參數	複製
Paste	沒有參數	貼上
InsertImage	圖片的路徑 (URL)	可以加入圖片, 路徑可以是絕對或是相對路徑. 這個指令用的是第二個參數: execCommand("InsertImage","圖片路徑")

文書處理軟體的基本功能都齊全了...

Richtext編輯器講到這邊要告一段落了...希望這篇教學對您有所幫助.

最後更新日期: 6/6/2004 5:32:00 PM