Javascript高級編程學習筆記（81）—— 富文本(1)
阿新 • • 發佈：2019-03-09
進行 win 其它 func 屬性設置 富文本編輯 idt 所見 文本框
富文本編輯
富文本編輯又稱為: WYSIWYG(What You See Is What You Get,所見即所得)
常用於博客等用途,雖然沒有規範,但是在IE最先引入後其他的瀏覽器廠商也相繼完成了對應功能的實現
該技術的本質就是在 HTML 頁面中嵌入<iframe>
通過設置頁面的 designMode 屬性,使該頁面可以被編輯
將該屬性設置為 on 後文檔就會變得可編輯 "off" 是默認值
以下方的 HTML 代碼為例
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html>
該頁面在 iframe 中可以像其它頁面一樣被加載
如果要讓該頁面可編輯,則需要將 designMode 設置為 on
但是該屬性只有在頁面加載完成後才可以訪問,所以需要借用 onload 事件在合適的時候設置該屬性
如下代碼所示:
<iframe name="richedit" style="height:500px;width:100px;" src="blank.html"></iframe> <script> window.onload=function(){ frames["richedit"].document.designMode = "on"; } </script>
該代碼片段執行後,頁面中則會出現類似文本框的可編輯區字段,該字段具有與其他網頁一一致的默認樣式,但是通過對 blank.html 的 CSS 進行設置就可以修改可編輯區域的外觀
contenteditable屬性
除了使用 iframe 這種方式之外,另一種富文本內容的方式是使用名為: contenteditable 的特殊屬性
該屬性最早由IE實現,可以應用於頁面中的任何元素,然後用戶就可以編輯該元素
這種方式的優點在於:
- 不用 iframe,空白頁,JS
- 只需要為元素設置 contenteditable 屬性即可
該屬性允許三種值:
- "true" 打開富文本編輯器
- "false" 表示關閉富文本編輯器
- "inherit" 表示該值從父元素繼承
Javascript高級編程學習筆記（81）—— 富文本(1)