前端學習(八十六) DOM-富文字(Dom)
阿新 • • 發佈:2018-12-28
富文字的含義
相對於純文字,富文字含有樣式資訊,比如顏色,風格(字型等),字號以及一些特殊功能,如超連結,影象
自己開發不現實,難度不亞於開發一個js,因此都是使用的開源框架
常見的富文字編輯器:CKEditor,TinyMCE,ACE,UEditor(這款是百度開發的,開源且免費,還是很不錯的)
當設元素置成contenteditable="true",或者js設定xxx.contentEditable = 'ture'
document.execCommand
然後就是要設定操作當前編輯區域中的內容,大多數命令實在操作選中區域的內容,或者插入新元素,或影響某一行的內容
bool = document.execCommand(aCommandName,ashowDefaultUI,avalueArgument)
- aCommandName:命令名稱
- ashowDefaultUI:是否顯示預設的互動介面,很多瀏覽器沒有實現這個功能,一般傳入false
- avalueArgument:額外資訊,比如插入圖片的URL
document.execCommand支援的命令很多,詳細檢視w3c文件
Selection
表示選區的範圍或者當前游標的位置,意味著我們可以使用指令碼精確的控制所選擇的內容(range),或者是游標的位置
這邊有兩個新名詞,anchor和focus
- anhor:起始位置,一般代表使用者按下時的節點,不會隨著拖動游標而發生變化
- focus:焦點,結束的位置,一般代表滑鼠鬆開時的位置,拖動滑鼠時focus會發生變化
range
表示一塊連續的文件片段,它可以使包含元素節點或文字節點,又或者是節點的一部分
總之,關於富文字,建議還是使用業內成熟的庫