台灣最大程式設計社群網站
線上人數
974
 
會員總數:246713
討論主題:190131
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> [問題]IE 抓不到焦距 (簡易的所見即所得發文器)
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
[問題]IE 抓不到焦距 (簡易的所見即所得發文器)
價值 : 30 QP  點閱數:1005 回應數:1
樓主

LAIRLJ
門外漢
0 1
27 1
發送站內信

首先,我對於 javascript 語言完全一竅不通,頂多只是大約看得懂邏輯性而已,以下這些程式碼是我拿某些程式語言給拼拼湊湊、修修剪剪而來。
我的問題是使用 Chrome 和 Firefox 都大致上正常,惟獨對 IE 就失準。

在以下程式碼的結果,發文框內若按下預設的按鈕,Chrome 和 Firefox 都大概可以隨心所欲的插入某些本文之中,例如 在預設的按鈕 2 內容在預設的按鈕 2 內容 之中 若想插入 預設的按鈕 3 內容 , Chrome 和 Firefox 只要把滑鼠指標給移到此兩段文字中間,再按下 按鈕 3 ,就很正常。然而 IE 就無法準確的插入其中,都會跑到最前段去,弄了好幾天,快投降了,請求諸位高手協助。

另外,若我想法這段程式碼內的 “加入顏色”的功能,原本是 拖曳文字內容加入顏色鈕按下色塊鈕 文字顯示變色,改成直接 拖曳文字內容按下色塊鈕 文字顯示變色,而不必經由 “加入顏色”鈕的程序。

以下為程式碼:
index.html
[code]<html>
<head>
<title>EDITOR TEXT</title>
<meta http-equiv='Content-Type' content='text/html; charset=big5'>
</head>

<body>
<style>
.Button {border:1px solid #6593cf;background-image:url(editor/off_bg.gif);}
.Button_Over {border:1px solid #ff3300;background-image:url(editor/on_bg.gif);}
.Button_Out {border:1px solid #6593cf;background-image:url(editor/off_bg.gif);}
</style>
<script language="javascript">
var cat_ary = new Array();
var g_id = new Array();
g_id.push('word_1');
g_id.push('word_2');
g_id.push('word_3');
g_id.push('word_4');
g_id.push('word_5');
var clientPC = navigator.userAgent.toLowerCase();
var clientVer = parseInt(navigator.appVersion);
var is_ie = ((clientPC.indexOf('msie') != -1) && (clientPC.indexOf('opera') == -1));
var is_win = ((clientPC.indexOf('win') != -1) || (clientPC.indexOf('16bit') != -1));
function showList(cat_id)
{
for(var i in cat_ary){document.getElementById(cat_ary[i]).style.display = 'none';}
document.getElementById(cat_id).style.display = 'inline';
}
var timeIndex; var fadeInterval; var alpha = 10;
function showTip(id)
{
clearTimeout(timeIndex); for(var i in g_id){document.getElementById(g_id[i]).style.display = 'none';}
obj = document.getElementById(id); alpha = 10; obj.style.display = 'block';
}
function fadeOn(obj)
{
alpha += 9;
if(is_ie) {obj.style.filter = 'Alpha(style=0,opacity=' + alpha + ')';} else {obj.style.opacity = alpha / 100;}
if(alpha >= 100){clearInterval(fadeInterval);alpha = 10;}
}
function hideTip()
{ timeIndex = setTimeout('activeHide()', 100); if(fadeInterval) {clearInterval(fadeInterval);alpha = 10;} }
function stopTimeout(){clearTimeout(timeIndex);}
function activeHide()
{ clearTimeout(timeIndex); for(var i in g_id){document.getElementById(g_id[i]).style.display = 'none';} }
/////////////////////////////////////////////////////////////
var form_name = 'postform';
var text_name = 'message';
var bbtags = new Array(
'',
'AAA',
'BBB',
'CCC',
'DDD',
'EEE'
);
</script>


<div style="width:450px;padding-top:100px">
<form enctype="multipart/form-data" action="mode=add" method="post" id="postform" onsubmit="return get_editor_data();">
<div class="wordtip w1" id="word_1" onmouseover="stopTimeout();" onmouseout="hideTip();"><div class="word_body">AAA</div></div>
<div class="wordtip w2" id="word_2" onmouseover="stopTimeout();" onmouseout="hideTip();"><div class="word_body">BBB</div></div>
<div class="wordtip w3" id="word_3" onmouseover="stopTimeout();" onmouseout="hideTip();"><div class="word_body">CCC</div></div>
<div class="wordtip w4" id="word_4" onmouseover="stopTimeout();" onmouseout="hideTip();"><div class="word_body">DDD</div></div>
<div class="wordtip w5" id="word_5" onmouseover="stopTimeout();" onmouseout="hideTip();"><div class="word_body">EEE</div></div>

<input type="button" value="1" onclick="bbstyle(1)" style="width:35px" onmouseover="showTip('word_1');" onmouseout="hideTip();">
<input type="button" value="2" onclick="bbstyle(2)" style="width:35px" onmouseover="showTip('word_2');" onmouseout="hideTip();">
<input type="button" value="3" onclick="bbstyle(3)" style="width:35px" onmouseover="showTip('word_3');" onmouseout="hideTip();">
<input type="button" value="4" onclick="bbstyle(4)" style="width:35px" onmouseover="showTip('word_4');" onmouseout="hideTip();">
<input type="button" value="5" onclick="bbstyle(5)" style="width:35px" onmouseover="showTip('word_5');" onmouseout="hideTip();">


<textarea style="position:absolute;top:-20px;left:-20px;width:0;height:0" name="message" id="message"></textarea>

<script language="JavaScript" type="text/javascript" src="editor.js"></script>
<script language="JavaScript" type="text/javascript">
var mydoc=document.getElementById("message");
var getdata = mydoc.value;
getdata = convert(getdata);
Instantiate("editor", getdata, "120px");
function get_editor_data()
{
setCodeOutput();
var bbcode_output=document.getElementById("bbcode_ouput_editor").value;
mydoc.value = bbcode_output;
}
function convert(text){return text;}
</script>
<input type="submit" value="儲存" name="post">
</form>
</div>
</body>
</html>[/code]


editor.js[code]var toolbar ="DELcolor,SPACE,ADDcolor";
var theSelection = false;
var clientPC = navigator.userAgent.toLowerCase();
var clientVer = parseInt(navigator.appVersion);
var is_ie = ((clientPC.indexOf('msie') != -1) && (clientPC.indexOf('opera') == -1));
var is_win = ((clientPC.indexOf('win') != -10) || (clientPC.indexOf('16bit') != -10));

var array_color = new Array();
array_color[0] ="#000000";
array_color[1] ="#660000";
array_color[2] ="#990000";
array_color[3] ="#ff0000";
array_color[4] ="#006600";
array_color[5] ="#009900";
array_color[6] ="#00ff00";
array_color[7] ="#000066";
array_color[8] ="#000099";
array_color[9] ="#0000ff";
array_color[10] ="#666600";
array_color[11] ="#ff6600";
array_color[12] ="#66ff00";
array_color[13] ="#006666";
array_color[14] ="#0066ff";
array_color[15] ="#660066";
array_color[16] ="#ff0066";
array_color[17] ="#6600ff";
//--------------------------------------
var starup=0;
var rng;
var allRTEs="";
var isIE;
var isIE_Mac;
var isGecko;
var isOpera9;
var isSafari;
var isSafari3;
var isKonqueror;
var isICab;
var isMacOS;
var HTML_ON;
var chkVK=0;
var editor_size;
var currenteditor="";
var ua=navigator.userAgent.toLowerCase();
isIE=((ua.indexOf("msie")!=-1)&&(ua.indexOf("opera")==-1)&&(ua.indexOf("webtv")==-1));
isGecko=(ua.indexOf("gecko")!=-1&&ua.indexOf("safari")==-1);
isOpera9=(ua.indexOf("opera")!=-1&&ua.indexOf("safari")==-1);
isSafari=(ua.indexOf("gecko")!=-1&&ua.indexOf("safari")!=-1&&ua.indexOf("version/3")==-1);
isSafari3=(ua.indexOf("gecko")!=-1&&ua.indexOf("safari")!=-1&&ua.indexOf("version/3")!=-1);
isKonqueror=(ua.indexOf("konqueror")!=-1);isICab=(ua.indexOf("icab")!=-1);
isIE_Mac=(ua.indexOf("msie")!=-1&&ua.indexOf("mac")!=-1);
isMacOS=(ua.indexOf("macintosh")!=-1);
//------------------------------------------------
function Instantiate(a,b,c) //("editor", 內容, "120px")
{
starup=1;
editor_size=parseInt(c);
if(allRTEs.length>0)allRTEs+=";";
allRTEs+=a;
b=BBCodeToHTML(b);
writeRTE(a,b,c,true,false);
}
//------------------------------------------------
function enableDesignMode(a,b,c) // 內容顯示至輸入框 //("editor", 內容, 不成立)
{
b=b.replace(/&amp;#/gi,"&#");
var d="<html id=\""+a+"\">\n";
d+="<head>\n";
d+="<meta http-equiv='Content-Type' content='text/html; charset=big5'>\n";
d+="<style><!-- body{line-height: 120%} p{margin-top:0;margin-bottom:0} --></style>\n";
d+="</head>\n";
d+="<body>\n";
d+=b+"\n";
d+="</body>\n";
d+="</html>";
if(document.all)
{
var f=frames[a].document;
f.open();
f.write(d);
f.close();
if(!c){f.designMode="On";}
}

else
{
try{
if(!c)document.getElementById(a).contentDocument.designMode="on";
try{
var f=document.getElementById(a).contentWindow.document;
f.open();
if(isGecko||isSafari){f.write(d+"<br>");}
else{f.write(d);}
f.close();
}
catch(e){alert("Error preloading content.");}
}
catch(e){return false;}
}
}
//------------------------------------------------
function setCodeOutput()
{
var a=allRTEs.split(";");
for(var i=0;i<a.length;i++){updateRTE(a[i]);}
}
//------------------------------------------------

function updateRTE(a)
{
starup=0;
//if(HTML_ON=="no"){document.getElementById("chkSrc"+a).checked=false;toggleHTMLSrc(a)}
var b=document.getElementById(a).contentWindow.document.body.innerHTML;
b=b.replace(/<div><\/div>/ig,"");
b=b.replace(/<br[^>]*>/ig,"<br>");
b=b.replace(/[\n\r]/ig,'');
b=HTMLToBBCode(b);
document.getElementById('bbcode_ouput_'+a).value=b;
document.getElementById('html_ouput_'+a).value=BBCodeToHTML(b);
}
//------------------------------------------------
function writeRTE(a,b,c,d,e) //("editor", 內容, "120px", 成立, 不成立)
{
document.write("<div style=\"float:left\">\n");
array=toolbar.split(",");
for(i=0;i<=array.length;i++){if(array[i])show_toolbar(array[i],a);}
document.write("</div>\n");
document.writeln("<div style=padding:5px 0>");
for (i=0;i<array_color.length;i++)// 顏色塊 1
{
document.writeln("<div style=\"float:left;width:18px;height:20px;font-size:0;border:1px solid #cccccc;background-color:" + array_color[i] + ";\" onclick=\"SetFormat('" + array_color[i] + "');\" onMouseover=\"this.style.border='1px solid #F29536';\" onMouseout=\"this.style.border='1px solid #cccccc';\">");
document.writeln("</div>");
}// 顏色塊 0
document.writeln("</div><br style=clear:both>");
document.write("<iframe style='width:100%;height:"+c+";background-color:white;border:1px solid #666666' frameborder=0 id='"+a+"' name='"+a+"'></iframe>\n");
document.write('<input type="hidden" id="html_ouput_'+a+'" name="html_ouput_'+a+'">');
document.write('<input type="hidden" id="bbcode_ouput_'+a+'" name="bbcode_ouput_'+a+'">');
if(!document.getElementById("hotmem"))document.write('<input type="hidden" id="hotmem" name="hotmem">');

enableDesignMode(a,b,e);
}
//------------------------------------------------
function show_toolbar(a,b) //顯示工具按鈕
{
a=a.replace(" ","");
if(a=="SPACE"){document.write("");}
else if(a=="ADDcolor"){write_button_richtext(b, "加入顏色", "addcolor.gif", "ADDcolor");}
else if(a=="DELcolor"){write_button_richtext(b, "移除顏色", "delcolor.gif", "DELcolor");}
}
//------------------------------------------------

function write_button_richtext(a,b,c,d) // 滑鼠移入按鈕的動作 //(代稱,解說,圖片,動作}
{
if(isSafari)
{document.write("<img class=Button title="+b+" src=editor/"+c+" onmouseover=\"this.className='Button_Over';\" onmouseout=\"this.className='Button_Out';\" onmousedown=\"return FormatText('"+a+"', '"+d+"', '')\">");}
else
{document.write("<img class=Button title="+b+" src=editor/"+c+" onmouseover=\"this.className='Button_Over';\" onmouseout=\"this.className='Button_Out';\" onclick=\"FormatText('"+a+"', '"+d+"', '')\">");}
}
//------------------------------------------------
function FormatText(a,b,c) //按鈕(滑鼠按下時的的動作) //(代稱, 動作, ''}
{
currenteditor=a;
var d;
if(isIE)
{
d=frames[a];
var f=d.document.selection;
if(f!=null){rng=f.createRange();}
}
else
{
d=document.getElementById(a).contentWindow;
var f=d.getSelection();
if(f!=""&&f.rangeCount>0)
{
rng=f.getRangeAt(f.rangeCount-1).cloneContents();
var g=d.document.createElement('div');
g.appendChild(rng);
}
}
if(b=="DELcolor")
{
if(isSafari)
{
d.document.execCommand("removeformat",false,c);
event.preventDefault();
event.returnValue=false;
}
else{d.document.execCommand("removeformat",false,c);}
}
else{parent.command="forecolor";}
}
//------------------------------------------------
function SetFormat(data)
{
self.parent.SetFontFormat(data);
self.parent.close_insert_pop();
}
//------------------------------------------------
function SetFontFormat(a,b)
{
var c=currenteditor;
var d;
if(isIE){d=frames[c];}
else{d=document.getElementById(c).contentWindow;}
var e=parent.command;
if(isIE)
{
var f=d.document.selection;
if(f!=null){var g=f.createRange();g=rng;g.select();}
}
else{d.focus();}
d.document.execCommand(e,false,a);
d.focus();
}
//------------------------------------------------
var steditor=0;

document.onmouseup=new Function("dragapproved=false");

function close_insert_pop(){chkVK=0;document.getElementById("insert_pop").style.display="none";}

function NoError(){return(true);}
onerror=NoError;
//------------------------------------------------
function WriteHTML(a,b) //常用字按鍵導引到輸入框
{
var c;
if(isIE)
{
c=frames[b];
c.focus();
var d=c.document.selection;
if(d!=null){rng=d.createRange();}
c.document.execCommand("removeformat",false,"");
rng.pasteHTML("");
rng.pasteHTML(a);
c.focus();
}
else if(isSafari)
{
c=document.getElementById(b).contentWindow;
c.focus();
a=a.replace(/</g,"[HOTAGOPEN]");
a=a.replace(/>/g,"[HOTAGCLOSE]");
c.document.execCommand('insertTEXT',false,a);
var e=document.getElementById(b).contentWindow.document.body.innerHTML;
e=e.replace(/\[HOTAGOPEN\]/g,'<');
e=e.replace(/\[HOTAGCLOSE\]/g,'>');
e=e.replace(/[\n\r]/ig,'');
document.getElementById(b).contentWindow.document.body.innerHTML=e;
c.focus();
}

else
{
c=document.getElementById(b).contentWindow;
c.focus();
c.document.execCommand('insertHTML',false," ");
c.document.execCommand("removeformat",false,"");
c.document.execCommand('insertHTML',false,a);
c.document.execCommand("removeformat",false,"");
c.focus();
}
}
//------------------------------------------------

function htmlentities(a)
{
a=a.replace(/</g,'&lt;');
a=a.replace(/>/g,'&gt;');
a=a.replace(/&/g,'&amp;');
return a;
}
//------------------------------------------------

function BBCodeToHTML(a)
{
a=a.replace(/&/g,'&amp;');
a=a.replace(/</g,'&lt;');
a=a.replace(/>/g,'&gt;');
a=a.replace(/ /g,'&nbsp;&nbsp;');
a=a.replace(/\n/g,'<br>');
a=a.replace(/\[color=(.*?)\]/gi,'<font color="$1">');
a=a.replace(/\[\/(font|color)\]/gi,'</font>');
return a;
}
//------------------------------------------------

function HTMLToBBCode(a)
{
if(starup=="0")
{
a=a.replace(/<br[^>]*>/gi,'\n');
a=a.replace(/<p([^>]*)>/gi,'<DIV$1>');
a=a.replace(/<\/p([^>]*)>/gi,'</DIV$1>\n');
}
else{a=htmlentities(a);}

var b=a.split("<");
var c=new Array();
var e=0;
if(b.length>1)
{
for(var i=0;i<b.length;i++)
{
if(i>0)b[i]='<'+b[i];
var f=b[i];
if(f.match(/<(font|div)( ([^>]{1,}.*?)){0,1}( {0,1}){0,1}>/i))
{
var g=RegExp.$1;
var h=RegExp.$3;
if(h.toLowerCase().indexOf("style=")!=-1&&h.toLowerCase().indexOf("color:")!=-1&&h.toLowerCase().indexOf("color=")!=-1)
{h=h.replace(/color="(.*?)"/gi,"");}

h=h.replace(/(color=|style=)/ig,"|$1");
h=h.replace(/("|")/g,""); /////// h=h.replace(/('|")/g,"");
h=h.replace(/ \|/g,"|");
var j=h.split("|");
var k=new Array();
if(j!=null)
{
for(var z=0;z<j.length;z++)
{
var l=j[z].split("=");
k[l[0].toLowerCase()]=j[z].replace(l[0].toLowerCase()+"=","");
}
}

var m='';
var g=g.toLowerCase();

if(g=="font")
{
if(j.length>0)
{
for(var r in k)
{
k[r]=k[r].replace(/^ +| +$/g,"");
if(r=="color"){m+='[color='+k['color']+']';}
else if(r=="style"){m+=AnalyzeHTMLBlock(g,k);}
}
}
}

else if(g=="div"||g=="span")
{
if(k['style']){m=AnalyzeHTMLBlock(g,k);}
else if(k['align']){m='['+k['align'].toUpperCase()+']';}
else{m='[HOTEDITOR_NEW_LINE]';}
}
b[i]=f.replace(/(<([^>]+)>)/,m);

if(g!="img"){c[e]=m;e++;}
}

else if(f.match(/<\/(font|div)>/i))
{
e--;
var w=c.pop();
if(w!=null)
{
var x="";
var A=w;
A=A.replace(/=(.*?)\]/g,"]");
A=A.replace(/\]/g,"],");
A=A.replace(/\[(.*?)\]/g,"[/$1]");
var B=A.split(",");
B.reverse();
for(var y=0;y<B.length;y++) {x+=B[y];}
x=x.replace(/\[\/\*\]/gi,"");
b[i]=b[i].replace(/(<([^>]+)>)/,x);
}
else{b[i]=b[i].replace(/(<([^>]+)>)/,"");}
}
}
var C=b.join("");
}

else{var C=a;}

C=C.replace(/&lt;/g,'<');
C=C.replace(/&gt;/g,'>');
C=C.replace(/&nbsp;/g,' ');
C=C.replace(/&amp;/g,'&');
C=C.replace(/ /g,'\t');
C=C.replace(/\[HOTEDITOR_NEW_LINE\]/g,'\n');
C=C.replace(/\[\/HOTEDITOR_NEW_LINE\]\n+/g,'\n');
C=C.replace(/\[\/HOTEDITOR_NEW_LINE\]/g,'\n');

if(starup=="0")
{
C=C.replace(/\[\*\]/gi,'\n[*]');
C=C.replace(/\n\n\[\*\]/gi,'\n[*]');
}

C=C.replace(/\[color=#.\w*\]\[\/color\]/gi,"");
C=C.replace(/^\n+/,"");
C=C.replace(/\n+$/,"");
return C;
}
//------------------------------------------------
function bbstyle(bbnumber)
{
if (bbnumber){
bbfontstyle(bbtags[bbnumber], '');
//document.forms[form_name].elements[text_name].focus();
}
return;
}
//------------------------------------------------
function bbfontstyle(bbopen, bbclose)
{
theSelection = false;
var textarea = document.forms[form_name].elements[text_name];
textarea.focus();
if ((clientVer >= 4) && is_ie && is_win)
{
theSelection = document.selection.createRange().text;

if (theSelection)
{
document.selection.createRange().text = bbopen + theSelection + bbclose;
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
}
else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
{
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}

var caret_pos = getCaretPosition(textarea).start;
var new_pos = caret_pos + bbopen.length;
insert_text(bbopen + bbclose);
if (!isNaN(textarea.selectionStart)){textarea.selectionStart = new_pos;textarea.selectionEnd = new_pos;}
else if (document.selection)
{var range = textarea.createTextRange();range.move("character", new_pos);range.select();storeCaret(textarea);}
textarea.focus();
return;
}
//------------------------------------------------
function insert_text(text, spaces, popup)
{
text = convert(text);
text = BBCodeToHTML(text);
WriteHTML(text,"editor");
}
//------------------------------------------------
function caretPosition(){var start = null;var end = null;}
//------------------------------------------------
function getCaretPosition(txtarea)
{
var caretPos = new caretPosition();

if(txtarea.selectionStart || txtarea.selectionStart == 0){caretPos.start = txtarea.selectionStart;caretPos.end = txtarea.selectionEnd;}
else if(document.selection)
{
var range = document.selection.createRange();
var range_all = document.body.createTextRange();
range_all.moveToElementText(txtarea);
var sel_start;
for (sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++){range_all.moveStart('character', 1);}
txtarea.sel_start = sel_start;caretPos.start = txtarea.sel_start;caretPos.end = txtarea.sel_start;
}
return caretPos;
}[/code]

本篇文章發表於2012-12-25 02:41
1樓
作者回應

LAIRLJ
檢舉此回應
這裡提供測試的頁面 :http://ming-sheng-loft.com/TEST/
本篇文章回覆於2012-12-25 17:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.