模仿百度百科的js编辑器，代码存档。

最新推荐文章于 2022-07-29 11:00:19 发布

步恒者

最新推荐文章于 2022-07-29 11:00:19 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：百度 button function input dialog border

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模仿百度百科的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.getElementByIdx_x("myifrm").contentWindow.document.execCommand("BackColor",false,obj.style.backgroundColor);
}
function setcolor(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand("ForeColor",false,obj.style.color);
}
function setvalue(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.focus();
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand(obj.value,false,false);
}
function setvalue2(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.focus();
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand(obj.title,false,false);
}
function setvalue3(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.focus();
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand(obj.title,true,true);
}
function setfont(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand('FontName',false,obj.value);
}
function setfontsize(obj)
{
document.getElementByIdx_x("myifrm").contentWindow.document.execCommand('FontSize',false,obj.value);
}
function repSelectionText(mytag) {
if(document.getElementByIdx_x("myifrm").contentWindow.getSelection) {
txt=document.getElementByIdx_x("myifrm").contentWindow.getSelection().toString();
oldnode=document.getElementByIdx_x("myifrm").contentWindow.getSelection().getRangeAt(0);
oldnode.deleteContents();
repnode=document.getElementByIdx_x("myifrm").contentWindow.document.createElement_x(mytag);
repnode.innerHTML=txt;
oldnode.insertNode(repnode);
}
else if(document.getElementByIdx_x("myifrm").contentWindow.document.selection && document.getElementByIdx_x("myifrm").contentWindow.document.selection.createRange) {
txt=document.getElementByIdx_x("myifrm").contentWindow.document.selection.createRange().text;
if(txt!="")
document.getElementByIdx_x("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.getElementByIdx_x("myrows").value;
cols=document.getElementByIdx_x("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.getElementByIdx_x("mytext").value=document.getElementByIdx_x("myifrm").contentWindow.document.body.innerHTML;
document.getElementByIdx_x("mytext").value=document.getElementByIdx_x("mytext").value.replace("#table#",tablestr);
document.getElementByIdx_x("myifrm").contentWindow.document.body.innerHTML=document.getElementByIdx_x("mytext").value;
}
else
{
txt=document.getElementByIdx_x("myifrm").contentWindow.getSelection().toString();
oldnode=document.getElementByIdx_x("myifrm").contentWindow.getSelection().getRangeAt(0);
oldnode.deleteContents();
repnode=document.getElementByIdx_x("myifrm").contentWindow.document.createElement_x("div");
repnode.innerHTML=tablestr;
oldnode.insertNode(repnode);
}
}
function settable()
{
document.getElementByIdx_x("dialog").style.display="none";
addText(document.getElementByIdx_x("myifrm").contentWindow.document.body,"#table#");
}
function showdialog()
{
document.getElementByIdx_x("dialog").style.display="block";
document.getElementByIdx_x("dialog").style.top=(document.documentElement.clientHeight-document.getElementByIdx_x("dialog").offsetHeight)/2+document.documentElement.scrollTop+"px";
document.getElementByIdx_x("dialog").style.left=(document.documentElement.offsetWidth-document.getElementByIdx_x("dialog").offsetWidth)/2+document.documentElement.scrollLeft+"px";
}
function btndis(mybool)
{
toolsojb=document.getElementByIdx_x("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.getElementByIdx_x("mytext");
srcview.value=document.getElementByIdx_x("myifrm").contentWindow.document.body.innerHTML;
document.getElementByIdx_x("myifrm").style.display="none";
btndis(true);
srcview.style.display="block";
obj.value="preview";
}
else if(obj.value=="preview")
{
srcview=document.getElementByIdx_x("mytext");
srcview.style.display="none";
document.getElementByIdx_x("myifrm").contentWindow.document.body.innerHTML=srcview.value;
document.getElementByIdx_x("myifrm").style.display="block";
btndis(false);
obj.value="viewSrc";
}
}
function myfind(obj)
{
currentstr=obj.innerHTML;
for(i=0;i<document.getElementByIdx_x("myifrm").contentWindow.document.getElementsByTagName_r("h1").length;i++)
{
if(document.getElementByIdx_x("myifrm").contentWindow.document.getElementsByTagName_r("h1")[i].innerHTML==currentstr)
{
window.scrollTo(0,document.getElementByIdx_x("myifrm").contentWindow.document.getElementsByTagName_r("h1")[i].offsetTop+200-70);
return;
}
}
}
mycount=0;
function updateindex()
{
try{
result="";
matchString = /<h1.*?>(.*?)<//h1>/ig;
str=document.getElementByIdx_x("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' οnclick=myfind(this)>"+arr[i]+"</li>";
}
}
document.getElementByIdx_x("indexdiv").innerHTML=result;
}catch(e){}
}
function mychange()
{
document.getElementByIdx_x("myifrm").style.height=Math.max(document.getElementByIdx_x("myifrm").contentWindow.document.body.scrollHeight,430)+"px";
myscroll();
updateindex();
}
firsttop=200+1*2;
function myscroll()
{
if(document.documentElement.scrollTop>firsttop)
{
document.getElementByIdx_x("toolsdiv").style.top=document.documentElement.scrollTop+"px";
document.getElementByIdx_x("indexdiv").style.top=document.documentElement.scrollTop+"px";
}
else
{
document.getElementByIdx_x("toolsdiv").style.top=firsttop+"px";
document.getElementByIdx_x("indexdiv").style.top=firsttop+"px";
}
document.getElementByIdx_x("dialog").style.top=(document.documentElement.clientHeight-document.getElementByIdx_x("dialog").offsetHeight)/2+document.documentElement.scrollTop+"px";
document.getElementByIdx_x("dialog").style.left=(document.documentElement.offsetWidth-document.getElementByIdx_x("dialog").offsetWidth)/2+document.documentElement.scrollLeft+"px";
}
function myload()
{
document.getElementByIdx_x("myifrm").contentWindow.document.designMode='On';
if(window.addEventListener)
{
document.getElementByIdx_x("myifrm").contentWindow.addEventListener('keydown', mychange, false);
document.getElementByIdx_x("myifrm").contentWindow.addEventListener('mousedown', mychange, false);
document.getElementByIdx_x("myifrm").contentWindow.addEventListener('keyup', mychange, false);
document.getElementByIdx_x("myifrm").contentWindow.addEventListener('mouseup', mychange, false);
}
else
{
document.getElementByIdx_x("myifrm").contentWindow.document.οnkeydοwn=mychange;
document.getElementByIdx_x("myifrm").contentWindow.document.οnmοusedοwn=mychange;
document.getElementByIdx_x("myifrm").contentWindow.document.οnkeyup=mychange;
document.getElementByIdx_x("myifrm").contentWindow.document.οnmοuseup=mychange;
}
}
window.οnlοad=myload;
window.οnscrοll=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 οnclick=showhtml(this) /><input type=button value='open' title=open style="color:red" οnclick=setvalue3(this)><input type=button value='save' title=saveas style="color:red" οnclick=setvalue3(this)><input type=button value=orange style="background:#ee9966" οnclick=setbgcolor(this) /><input type=button value=green style="background:#888800" οnclick=setbgcolor(this) /><input type=button value=blue style="background:#6699ee" οnclick=setbgcolor(this) /><input type=button value=gray style="background:#cccccc" οnclick=setbgcolor(this) /><input type=button value=red style="color:#FF0033" οnclick=setcolor(this) /><input type=button value=green style="color:#00FF33" οnclick=setcolor(this) /><input type=button value=blue style="color:#0000FF" οnclick=setcolor(this) /><input type=button value=gray style="color:#cccccc" οnclick=setcolor(this) /><input type=button value=bold οnclick=setvalue(this) /><input type=button value=italic οnclick=setvalue(this) /><input type=button value=underline οnclick=setvalue(this)>font<select οnchange=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 οnchange=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 οnclick=setvalue2(this)><input type=button value=center title=JustifyCenter οnclick=setvalue2(this)><input type=button value=right title=JustifyRight οnclick=setvalue2(this)><input type=button value=order title=InsertOrderedList οnclick=setvalue2(this)><input type=button value=unorder title=InsertUnorderedList οnclick=setvalue2(this)><input type=button value=indent title=Indent οnclick=setvalue2(this)><input type=button value=outdent title=Outdent οnclick=setvalue2(this)><input type=button value=h1 title='H1' οnclick=seth1()><input type=button value=h2 title='H2' οnclick=seth2()><input type=button value=hr title='InsertHorizontalRule' οnclick=setvalue2(this)><input type=button value=p title='InsertParagraph' οnclick=setvalue2(this)><input type=button value=link title='CreateLink' style="color:red" οnclick=setvalue3(this)><input type=button value=img title='InsertImage' style="color:red" οnclick=setvalue3(this)><input type=button value=table title='InsertTable' οnclick=showdialog()><input type=button value=selAll title=selectAll οnclick=setvalue2(this)><input type=button value=cut title=cut style="color:red" οnclick=setvalue3(this)><input type=button value=copy title==copy style="color:red" οnclick=setvalue3(this)><input type=button value=paste title=paste style="color:red" οnclick=setvalue3(this)><input type=button value=undo οnclick=setvalue(this)><input type=button value=redo οnclick=setvalue(this)><input type=button value=delete οnclick=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 οnclick=settable() /></div>
</body>
</html>