返回列表 發帖

[問題]IE 抓不到焦距 (簡易的所見即所得發文器)

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

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

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

以下為程式碼:
index.html
<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>
續接下篇.......................
懇求諸位高手給予解答,謝謝~~~

本帖最後由 lair 於 2012-12-24 21:27 編輯

接上篇的 editor.js
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;
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; }
  • TOP

    本帖最後由 lair 於 2012-12-24 21:26 編輯

    editor.js (文字過長,截成兩篇,請接下篇)
    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";}
    }

    TOP

    返回列表 回復 發帖