※ 引述《gpmm (銀色)》之銘言： : 我想您應該沒有弄清楚我要表達什麼。 : 他內容的確是 div 沒錯， : 但並不是在 textarea 上覆蓋一個 div 這種手法。 : 這種線上編輯器採用的是 iframe 和 contentEditabl、designMode 相關作法。 : 如果您願意深入瞭解相關概念，可以參考 TonyQ 大大的 : ● 461 210/13 TonyQ R: [問題] 拖曳框選區域的 library : 此篇文章。 : - : 誤導是很可怕的 :Q 不，我發現誤導的人是我，它說的是對的， 因為如果是designMode的話，左邊的行號區域應該是也可以編輯的。 (這我之前一開始開網站的時候就有發現，也很好奇。) 那的確是一個方法，不過應該不是現在這個網站用的方法。 ──────────────────────────────── 我一開始會這麼判斷是因為用inspceter看到原網站。 http://www.codeIDE.com 是用iframe的方式連結到 microeditor. 當然，相對於原網站這個錯覺很容易產生， 而且過去看別人的editor的成見讓我帶入這個想法。 直接連 http://www.codeide.com/js/editor/microeditor.htm 就會發現不是這麼一回事.... ──────────────────────────────── 另外舉幾個佐證證明 wxyy的說法是對的 1.他所提到的在microeditor 將textarea的文字顏色設黑，透明度設1。 文字顏色設黑應該就會發現有一層浮水印印在文字下面了. 2.如果將src的readonly屬性設起來，就會發現甚麼程式碼都輸入不了。 (我是用inspecter的 new attribute來做 , 用dom也可以.) 3.如果是designMode設起來的話應該整個網頁都是editable... (我測了一下是沒辦法指定哪些元素可編輯 , 還望熟練的人指正...) 基本上，我為我之前不成熟的觀察跟誤導致歉， 也感謝wxyy網友不吝提供經驗與技術。:) 那再回頭整理歸納一下一開始討論的主題，這個網站使用了幾個部份， 1.一個textarea的編輯區域 a.具體 css style 設置參考 (節錄microeditor.html) #src { /*中略部分屬性*/ color:white; opacity:0.2; overflow:scroll; } b.wrap屬性處理部分斷行問題 c.在他捲動的時候 (onscroll) 自動將div也一起同步捲動 這部分他還有位非IE瀏覽器考量(txt=src=textarea) /*節錄自 init 這個js function in microeditor */ if(navigator.userAgent.indexOf("MSIE")==-1){ txt.onmousemove=sync txt.onmousewheel=sync 2.一個div區域，而且採用pre tag當做實際顯示的content。 pre tag可以保證空白的地方可以一致. (參考http://www.w3schools.com/tags/tag_pre.asp ) 並且用sync/refresh function與src同步顯示。 ──────────────────────────────── 至於它偵測的地方可以看底下的code /*節錄自 init 這個js function in microeditor */ txt.onkeyup=txt.onkeydown=txt.onselect=txt.onmousewheel=refresh refresh在init也有做宣告的行為，剩下的就自己看囉。 -- 不小心就陷在過去的經驗了， 囿於過去的經驗和知覺，很容易錯過一些好東西。 -- 　▄▅▆▇███▇▆▅▄▃　　　　　　　　╰┼╯─╮ ╮　　　　　 　 　◥███████████◣　　　　　　　╰┼╯＝│=│　　　　　　　　 ◥██████───────◣　　　　＊．　╯　 ╯ ╯ の　物　語　．＊ 　◥███████──────◣　～　◢◣　　　　　　　　　　　　 ◢◣ 　◥██████───────◤　　　◥◤＊　　空白的世界．翼 ＊◥◤ 　◥██▁▂▃▄▅▆▇███▆▅▄▃▂▂～telnet://tony1223.no-ip.info --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.132.59.247 ※ 編輯: TonyQ 來自: 220.132.59.247 (11/27 12:51)