• 2010-11-09

    模仿百度百科的js编辑器(兼容ie&ff&op) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/83022403.html

    模仿百度百科的js编辑器,代码存档。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>html editor</title>
    <script>
    function setbgcolor(obj)
    {
    document.getElementById("myifrm").contentWindow.document.execCommand("BackColor",false,obj.style.backgroundColor);
    }
    function setcolor(obj)
    {
    document.getElementById("myifrm").contentWindow.document.execCommand("ForeColor",false,obj.style.color);
    }
    function setvalue(obj)
    {
    document.getElementById("myifrm").contentWindow.focus();
    document.getElementById("myifrm").contentWindow.document.execCommand(obj.value,false,false);
    }
    function setvalue2(obj)
    {
    document.getElementById("myifrm").contentWindow.focus();
    document.getElementById("myifrm").contentWindow.document.execCommand(obj.title,false,false);
    }
    function setvalue3(obj)
    {
    document.getElementById("myifrm").contentWindow.focus();
    document.getElementById("myifrm").contentWindow.document.execCommand(obj.title,true,true);
    }
    function setfont(obj)
    {
    document.getElementById("myifrm").contentWindow.document.execCommand('FontName',false,obj.value);
    }
    function setfontsize(obj)
    {
    document.getElementById("myifrm").contentWindow.document.execCommand('FontSize',false,obj.value);
    }
    function repSelectionText(mytag) {
    if(document.getElementById("myifrm").contentWindow.getSelection) {
    txt=document.getElementById("myifrm").contentWindow.getSelection().toString();
    oldnode=document.getElementById("myifrm").contentWindow.getSelection().getRangeAt(0);
    oldnode.deleteContents();
    repnode=document.getElementById("myifrm").contentWindow.document.createElement(mytag);
    repnode.innerHTML=txt;
    oldnode.insertNode(repnode);
    }
    else if(document.getElementById("myifrm").contentWindow.document.selection && document.getElementById("myifrm").contentWindow.document.selection.createRange) {
    txt=document.getElementById("myifrm").contentWindow.document.selection.createRange().text;
    if(txt!="")
    document.getElementById("myifrm").contentWindow.document.selection.createRange().pasteHTML("<"+mytag+">"+txt+"</"+mytag+">");
    }
    }
    function seth1()
    {
    repSelectionText("h1");
    updateindex();
    }
    function seth2()
    {
    repSelectionText("h2");
    }
    function addText(oTextarea,strText){
    tablestr="<table border=1 style='width:300px;height:100px'>";
    rows=document.getElementById("myrows").value;
    cols=document.getElementById("mycols").value;
    for(i=0;i<rows;i++)
    {
    tablestr+="<tr>";
    for(j=0;j<cols;j++)
    tablestr+="<td></td>";
    tablestr+="</tr>";
    }
    tablestr+="</table>";
    if(window.clipboardData)
    {
    clipboardData.setData("text",strText);
    oTextarea.focus();
    document.execCommand("paste");
    document.getElementById("mytext").value=document.getElementById("myifrm").contentWindow.document.body.innerHTML;
    document.getElementById("mytext").value=document.getElementById("mytext").value.replace("#table#",tablestr);
    document.getElementById("myifrm").contentWindow.document.body.innerHTML=document.getElementById("mytext").value;
    }
    else
    {
    txt=document.getElementById("myifrm").contentWindow.getSelection().toString();
    oldnode=document.getElementById("myifrm").contentWindow.getSelection().getRangeAt(0);
    oldnode.deleteContents();
    repnode=document.getElementById("myifrm").contentWindow.document.createElement("div");
    repnode.innerHTML=tablestr;
    oldnode.insertNode(repnode);
    }
    }
    function settable()
    {
    document.getElementById("dialog").style.display="none";
    addText(document.getElementById("myifrm").contentWindow.document.body,"#table#");
    }
    function showdialog()
    {
    document.getElementById("dialog").style.display="block";
    document.getElementById("dialog").style.top=(document.documentElement.clientHeight-document.getElementById("dialog").offsetHeight)/2+document.documentElement.scrollTop+"px";
    document.getElementById("dialog").style.left=(document.documentElement.offsetWidth-document.getElementById("dialog").offsetWidth)/2+document.documentElement.scrollLeft+"px";
    }
    function btndis(mybool)
    {
    toolsojb=document.getElementById("toolsdiv");
    for(i=0;i<toolsojb.childNodes.length;i++)
    {
    if(toolsojb.childNodes[i].id!="mybtn")
    try
    {
    toolsojb.childNodes[i].disabled=mybool;
    }catch(e){}
    }
    }
    function showhtml(obj)
    {
    if(obj.value=="viewSrc")
    {
    srcview=document.getElementById("mytext");
    srcview.value=document.getElementById("myifrm").contentWindow.document.body.innerHTML;
    document.getElementById("myifrm").style.display="none";
    btndis(true);
    srcview.style.display="block";
    obj.value="preview";
    }
    else if(obj.value=="preview")
    {
    srcview=document.getElementById("mytext");
    srcview.style.display="none";
    document.getElementById("myifrm").contentWindow.document.body.innerHTML=srcview.value;
    document.getElementById("myifrm").style.display="block";
    btndis(false);
    obj.value="viewSrc";
    }
    }
    function myfind(obj)
    {
    currentstr=obj.innerHTML;
    for(i=0;i<document.getElementById("myifrm").contentWindow.document.getElementsByTagName("h1").length;i++)
    {
    if(document.getElementById("myifrm").contentWindow.document.getElementsByTagName("h1")[i].innerHTML==currentstr)
    {
    window.scrollTo(0,document.getElementById("myifrm").contentWindow.document.getElementsByTagName("h1")[i].offsetTop+200-70);
    return;
    }
    }
    }
    mycount=0;
    function updateindex()
    {
    try{
    result="";
    matchString = /<h1.*?>(.*?)<\/h1>/ig;
    str=document.getElementById("myifrm").contentWindow.document.body.innerHTML;
    newstr=str.match(matchString);
    if(newstr)
    {
    newstr=newstr.join();
    arr=newstr.replace(/<h1.*?>(.*?)<\/h1>/ig,"$1").split(",");
    for(i in arr)
    {
    result+="<li style='cursor:pointer' onclick=myfind(this)>"+arr[i]+"</li>";
    }
    }
    document.getElementById("indexdiv").innerHTML=result;
    }catch(e){}
    }
    function mychange()
    {
    document.getElementById("myifrm").style.height=Math.max(document.getElementById("myifrm").contentWindow.document.body.scrollHeight,430)+"px";
    myscroll();
    updateindex();
    }
    firsttop=200+1*2;
    function myscroll()
    {
    if(document.documentElement.scrollTop>firsttop)
    {
    document.getElementById("toolsdiv").style.top=document.documentElement.scrollTop+"px";
    document.getElementById("indexdiv").style.top=document.documentElement.scrollTop+"px";
    }
    else
    {
    document.getElementById("toolsdiv").style.top=firsttop+"px";
    document.getElementById("indexdiv").style.top=firsttop+"px";
    }
    document.getElementById("dialog").style.top=(document.documentElement.clientHeight-document.getElementById("dialog").offsetHeight)/2+document.documentElement.scrollTop+"px";
    document.getElementById("dialog").style.left=(document.documentElement.offsetWidth-document.getElementById("dialog").offsetWidth)/2+document.documentElement.scrollLeft+"px";
    }
    function myload()
    {
    document.getElementById("myifrm").contentWindow.document.designMode='On';
    if(window.addEventListener)
    {
    document.getElementById("myifrm").contentWindow.addEventListener('keydown', mychange, false);
    document.getElementById("myifrm").contentWindow.addEventListener('mousedown', mychange, false);
    document.getElementById("myifrm").contentWindow.addEventListener('keyup', mychange, false);
    document.getElementById("myifrm").contentWindow.addEventListener('mouseup', mychange, false);
    }
    else
    {
    document.getElementById("myifrm").contentWindow.document.onkeydown=mychange;
    document.getElementById("myifrm").contentWindow.document.onmousedown=mychange;
    document.getElementById("myifrm").contentWindow.document.onkeyup=mychange;
    document.getElementById("myifrm").contentWindow.document.onmouseup=mychange;
    }
    }
    window.onload=myload;
    window.onscroll=myscroll;
    </script>
    </head>
    <body style="margin:0;padding:0">
    <div id=topdiv style="width:1000px;height:200px;border:1px solid gray;background:#ccc;text-align:center;vertical-align:middle;line-height:200px">welcome to my editor</div>
    <div id=toolsdiv style="width:1000px;height:70px;border:1px solid gray;background:gray;position:absolute">
    <input id=mybtn type=button value=viewSrc onclick=showhtml(this) /><input type=button value='open' title=open style="color:red" onclick=setvalue3(this)><input type=button value='save' title=saveas style="color:red" onclick=setvalue3(this)><input type=button value=orange style="background:#ee9966" onclick=setbgcolor(this) /><input type=button value=green style="background:#888800" onclick=setbgcolor(this) /><input type=button value=blue style="background:#6699ee" onclick=setbgcolor(this) /><input type=button value=gray style="background:#cccccc" onclick=setbgcolor(this) /><input type=button value=red style="color:#FF0033" onclick=setcolor(this) /><input type=button value=green style="color:#00FF33" onclick=setcolor(this) /><input type=button value=blue style="color:#0000FF" onclick=setcolor(this) /><input type=button value=gray style="color:#cccccc" onclick=setcolor(this) /><input type=button value=bold onclick=setvalue(this) /><input type=button value=italic onclick=setvalue(this) /><input type=button value=underline onclick=setvalue(this)>font<select onchange=setfont(this)>
    <option value="Arial">Arial</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
    <option value="Georgia">Georgia</option>
    <option value="Verdana">Verdana</option>
    <option value="Geneva">Geneva</option>
    <option value="黑体">黑体</option>
    <option value="楷体_GB2312">楷体 GB2312</option>
    <option value="宋体">宋体</option>
    </select>size<select onchange=setfontsize(this)>
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=4>4</option>
    <option value=5>5</option>
    <option value=6>6</option>
    <option value=7>7</option>
    </select><input type=button value=left title=JustifyLeft onclick=setvalue2(this)><input type=button value=center title=JustifyCenter onclick=setvalue2(this)><input type=button value=right title=JustifyRight onclick=setvalue2(this)><input type=button value=order title=InsertOrderedList onclick=setvalue2(this)><input type=button value=unorder title=InsertUnorderedList onclick=setvalue2(this)><input type=button value=indent title=Indent onclick=setvalue2(this)><input type=button value=outdent title=Outdent onclick=setvalue2(this)><input type=button value=h1 title='H1' onclick=seth1()><input type=button value=h2 title='H2' onclick=seth2()><input type=button value=hr title='InsertHorizontalRule' onclick=setvalue2(this)><input type=button value=p title='InsertParagraph' onclick=setvalue2(this)><input type=button value=link title='CreateLink' style="color:red" onclick=setvalue3(this)><input type=button value=img title='InsertImage' style="color:red" onclick=setvalue3(this)><input type=button value=table title='InsertTable' onclick=showdialog()><input type=button value=selAll title=selectAll onclick=setvalue2(this)><input type=button value=cut title=cut style="color:red" onclick=setvalue3(this)><input type=button value=copy title==copy style="color:red" onclick=setvalue3(this)><input type=button value=paste title=paste style="color:red" onclick=setvalue3(this)><input type=button value=undo onclick=setvalue(this)><input type=button value=redo onclick=setvalue(this)><input type=button value=delete onclick=setvalue(this)>
    </div>
    <div id=indexdiv style="width:200px;height:500px;border:1px solid gray;position:absolute;left:1010px"></div>
    <iframe src=content.html id=myifrm style="width:1000px;height:430px;padding-top:70px;border:1px solid gray;z-index:1000" scrolling="no"></iframe>
    <textarea id=mytext style="padding-top:70px;width:1000px;height:430px;display:none;z-index:1000"></textarea>
    <div id=dialog style="border:1px solid gray;width:200px;height:70px;padding:20px;display:none;position:absolute;background:lightgreen">rows:<select id=myrows><option value=1>1</option><option value=2 selected="selected">2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select><br />cols:<select id=mycols><option value=1>1</option><option value=2>2</option><option value=3 selected="selected">3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select><br /><input type=button value=ok onclick=settable() /></div>
    </body>
    </html>

    分享到:

    历史上的今天: