富文本編輯的利器execCommand

富文本編輯中一個非常關鍵的document屬性execCommand(command,boole,val);這個屬性可以得到並且編輯我們當前選則文檔節點內容。

我們上一節講過createRange和createTextRange,都是針對文檔去創建並保存一個range選區,一般不會用來去做富文本編輯這種需求,而只是單純的去做單個或者幾個選取插入以及對光標處理效果;

不過後者可以利用document.selection.createTextRange().execCommand(a,b,c)去實現對選區編輯樣式等。但是前者也就是w3c中並沒有execCommand;所以實現起來就比較費勁

如果非得要用這兩個去實現富文本也未必不可,因爲兩個方法中都有對選區的操作方法(我們可以對選區內容進行剪切後再編輯再複製原處)例如插入節點文本以及環繞選區等。

不過這種方式處理的就不能是單純的像input框或者textArea這種文本輸入節點了,因爲所有設置都不會在裏面顯示,不過我們還是可以簡單的針對其他p等標籤進行刪除插入樣式等更爲精細類似操作;此處不再贅述。

execCommand這個屬性是針對選區進行操作的,例如:加粗、下劃線、插入等。

不過由於w3c標準瀏覽器裏面根本就沒有execCommand這個屬性,所以實現起來就沒這個這麼輕鬆易懂了。一般的富文本實現方法都會將編輯器放置於iframe中然後得到iframe的document對象,

最後利用該對象去得到execCommang屬性從而達到我們富文本編輯效果。

具體應用介紹如下(來自互聯網):

參數說明

    command

    類型:String

    功能:要執行的命令的名稱

    boole

    類型:boolean

    功能:是否向用戶顯示命令特定的對話框或消息框。

    val

    類型:string

    功能:要使用該命令分配的值。並非適用於所有命令。

所有屬性:

AbsolutePosition 設定元素的 position 屬性爲“absolute”(絕對)。 

BackColor 設置或獲取當前選中區的背景顏色。 

BlockDirLTR 目前尚未支持。 

BlockDirRTL 目前尚未支持。 

Bold 切換當前選中區的粗體顯示與否。 

BrowseMode 目前尚未支持。 

Copy 將當前選中區複製到剪貼板。 

CreateBookmark 創建一個書籤錨或獲取當前選中區或插入點的書籤錨的名稱。 

CreateLink 在當前選中區上插入超級鏈接,或顯示一個對話框允許用戶指定要爲當前選中區插入的超級鏈接的 URL。 

Cut 將當前選中區複製到剪貼板並刪除之。 

Delete 刪除當前選中區。 

DirLTR 目前尚未支持。 

DirRTL 目前尚未支持。 

EditMode 目前尚未支持。 

FontName 設置或獲取當前選中區的字體。 

FontSize 設置或獲取當前選中區的字體大小。 

ForeColor 設置或獲取當前選中區的前景(文本)顏色。 

FormatBlock 設置當前塊格式化標籤。 

Indent 增加選中文本的縮進。 

InlineDirLTR 目前尚未支持。 

InlineDirRTL 目前尚未支持。 

InsertButton 用按鈕控件覆蓋當前選中區。 

InsertFieldset 用方框覆蓋當前選中區。 

InsertHorizontalRule 用水平線覆蓋當前選中區。 

InsertIFrame 用內嵌框架覆蓋當前選中區。 

InsertImage 用圖像覆蓋當前選中區。 

InsertInputButton 用按鈕控件覆蓋當前選中區。 

InsertInputCheckbox 用複選框控件覆蓋當前選中區。 

InsertInputFileUpload 用文件上載控件覆蓋當前選中區。 

InsertInputHidden 插入隱藏控件覆蓋當前選中區。 

InsertInputImage 用圖像控件覆蓋當前選中區。 

InsertInputPassword 用密碼控件覆蓋當前選中區。 

InsertInputRadio 用單選鈕控件覆蓋當前選中區。 

InsertInputReset 用重置控件覆蓋當前選中區。 

InsertInputSubmit 用提交控件覆蓋當前選中區。 

InsertInputText 用文本控件覆蓋當前選中區。 

InsertMarquee 用空字幕覆蓋當前選中區。 

InsertOrderedList 切換當前選中區是編號列表還是常規格式化塊。 

InsertParagraph 用換行覆蓋當前選中區。 

InsertSelectDropdown 用下拉框控件覆蓋當前選中區。 

InsertSelectListbox 用列表框控件覆蓋當前選中區。 

InsertTextArea 用多行文本輸入控件覆蓋當前選中區。 

InsertUnorderedList 切換當前選中區是項目符號列表還是常規格式化塊。 

Italic 切換當前選中區斜體顯示與否。 

JustifyCenter 將當前選中區在所在格式化塊置中。 

JustifyFull 目前尚未支持。 

JustifyLeft 將當前選中區所在格式化塊左對齊。 

JustifyNone 目前尚未支持。 

JustifyRight 將當前選中區所在格式化塊右對齊。 

LiveResize 迫使 MSHTML 編輯器在縮放或移動過程中持續更新元素外觀,而不是隻在移動或縮放完成後更新。 

MultipleSelection 允許當用戶按住 Shift 或 Ctrl 鍵時一次選中多於一個站點可選元素。 

Open 打開。 

Outdent 減少選中區所在格式化塊的縮進。 

OverWrite 切換文本狀態的插入和覆蓋。 

Paste 用剪貼板內容覆蓋當前選中區。 

PlayImage 目前尚未支持。 

Print 打開打印對話框以便用戶可以打印當前頁。 

Redo 重做。 

Refresh 刷新當前文檔。 

RemoveFormat 從當前選中區中刪除格式化標籤。 

RemoveParaFormat 目前尚未支持。 

SaveAs 將當前 Web 頁面保存爲文件。 

SelectAll 選中整個文檔。 

SizeToControl 目前尚未支持。 

SizeToControlHeight 目前尚未支持。 

SizeToControlWidth 目前尚未支持。 

Stop 停止。 

StopImage 目前尚未支持。 

StrikeThrough 目前尚未支持。 

Subscript 目前尚未支持。 

Superscript 目前尚未支持。 

UnBookmark 從當前選中區中刪除全部書籤。 

Underline 切換當前選中區的下劃線顯示與否。 

Undo 撤消。 

Unlink 從當前選中區中刪除全部超級鏈接。 

Unselect 清除當前選中區的選中狀態。

其中各個瀏覽器都支持的有如下:

cut paste bold delete createLink fontName fontSize backColor foreColor formatBlockindent outdent insertHorizontalRule insertImage insertOrderedList

 insertUnorderedList insertParagraph(有差異) italic justifyRight justifyCenter justifyLeft undo redo unlink(有差異) Underline SuperScript SelectAll

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章