IE 的 "designMode" 與失蹤的游標位置 (IE, designMode, and wrong cursor position)
gugod
這個特殊的屬性。
對於 designMode="on" 的 <body> 元素，或 <iframe>
元素，會變成整個是可以編輯的狀態。
但是在如果游標位置離開該 document 物件，再以
execCommand() 或 pasteHTML() 放東西進去時，
IE
會有個明顯的錯誤：游標位置回到文件起點。更有甚著，只會出現錯誤，顯示你在存取
NULL
變數的屬性值，然後中止。
If you're implementing an js wysiwyg editor, turning on "designMode" is
usually
one easy way. Any body / iframe element with deisgnMod="on" becomes
fully editable.
However, if you try to do execCommand() or pasteHTML() after the input
focus changed
to wherever outside the editable body, it triggers an IE mis-behaviour:
the cursor
is returned to the beginning of editing area. Or even, just a js error
indicating
you're accessing properties to a NULL variable.
這顯然是個 IE
Bug，只好想辨法自已記著游標位置來解決。以下這段
code 是解決的辨法：
（其中的變數與函式請自行跟據名稱修改）
It's obviously an IE bug, the only work-around is to keep track the
cursor
position on your own. The following code snippet shows the solution:
(Change the functions and vairables to fit your requirement)
if ( is_ie ) {
var self = this;
var win = this.get_edit_window(); // a frame obj
var doc = this.get_edit_document(); // frame.document
self.ieSelectionBookmark = null;
var bookmark = function() {
var range = doc.selection.createRange();
self.ieSelectionBookmark = range.getBookmark();
}
doc.attachEvent("onbeforedeactivate", bookmark);
var restoreBookmark = function() {
if (self.ieSelectionBookmark) {
var range = doc.body.createTextRange();
range.moveToBookmark(self.ieSelectionBookmark);
range.collapse();
range.select();
}
}
doc.attachEvent("onactivate", restoreBookmark);
}
也就是說，利用 IE
自家的的事件來解決它自家的問題，這裡用了
"onbefordeactive" 與
"onactive"
兩者。前者在輸入的焦點離開之前記下游標位置，後者在輸入焦點回復之後立刻
復位到前次存下的位置。
This way, I used IE's on weirdo event to solve it's weirdo behaves. For
this
instance, "onbefordeactive" and "onactive". The former handler keeps
the cursor
position before the editing area is unfocused. The later handler revert
it back
right after it's focused.
lukhnos
> 如果在寫 wysiwyg 編輯器的話，常常會打開 "designMode"
> 這個特殊的屬性。
> usually
> one easy way. Any body / iframe element with deisgnMod="on" becomes
Although this is not a moderated group (or is it?), I just wonder if
we should have a policy for bilingual posts--should they be posted
separately?
雖然這不是一個被協調的群組（或者是它嗎？），我只是好奇如果
我們應該有個雙語政策，像是英文文章應該要另外成篇？
(anyway, 一如雙語的 blog、雙語的公告......
至今好像還是沒好解法呀)
d.
Kang-min Liu
--
☛ Cheers,
Kang-min Liu