※ 引述《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)