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

最新推荐文章于 2022-07-29 11:00:19 发布
最新推荐文章于 2022-07-29 11:00:19 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： 百度 button function input dialog border

模仿百度百科的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>

步恒者
关注
专栏目录
仿百度百科网站源码
03-23
仿百度百科网站源码，后台管理，从前台登录，管理员帐号：admin，管理员密码：admin888
仿百度百科源码.zip
03-14
仿百度百科源码
百度首页html简单代码_【建材关键词】从零排名到百度首页【时间：7天】【面授学员】...
weixin_39634876的博客
12-13 81
　　案例截图：　　上图中这位学员是做建材行业关键词，截至到昨天为止，从建站到优化上首页，时间为7天左右，大家看图中快照时间也可以知道，7天前写的一篇文章、内页已经在百度首页!我们来看一下5118趋势图!　　从趋势图可以看出，23号时排名还是零，26号时已经在百度首页，由于昨天一波真实流量点击，一天从百度第9名，上升到百度前3名。数据明明白白，全部在这里!为什么说这些，只为证明本人不是标题党!实战型...
仿百度百科的源码
12-12
仿百度百科的源码，使用asp。net+assecc数据库！
JS模仿编辑器实时改变文本框宽度和高度大小的方法
11-26
本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法。分享给大家供大家参考。具体如下： 这里演示JS模仿编辑器中实时改变文本框大小，包括宽度和高度的方法，在一些在线编辑器，比如eWebEditor中，就有...
纯CSS仿百度百科下拉菜单特效代码
03-20
"纯CSS仿百度百科下拉菜单特效代码"就是这样一个实例，它旨在通过CSS（层叠样式表）技术模仿百度百科网站的下拉菜单效果。这个项目的核心在于利用CSS的灵活性和强大的选择器来构建动态的导航菜单，无需JavaScript的...
jQuery仿百度百科右侧浮动菜单代码
06-24
这个项目模仿了百度百科页面右侧的浮动索引菜单，用户在浏览长篇文章时可以方便地通过该菜单快速定位到所需内容，提高浏览效率。下面将详细阐述其主要实现原理和涉及的技术点。 首先，jQuery是一个轻量级的...
JS版百度编辑器可直接使用
05-08
js版的百度编辑器,可以方便快捷的嵌入到各个应用场景当中
jQuery仿百度百科右侧浮动菜单代码.zip
07-04
【jQuery仿百度百科右侧浮动菜单代码】是一种使用JavaScript库jQuery实现的网页交互功能，它旨在模仿百度百科中常见的右侧浮动菜单。这个菜单通常在页面滚动时保持固定在屏幕的一侧，提供一个方便的导航工具，用户...
js仿百度百科右侧导航特效
05-07
js仿百度百科右侧导航特效,很好用
仿百度百科网站程序源码_百科系统源码,仿wikipedia百科源码
网站开发专家
02-09 1104
这个项目我这边已经开发好的了，我这边忙完后，我就可以整理成一个系列发布在这里给大家一个参考。 项目可以支持多种语言切换 程序采用：PHP+MySQL 支持显示：电脑，手机，APP 功能： 创建百科，修改百科等 ...
仿百度百科网站程序源码
10-05
仿百度百科网站程序源码是专为中文用户设计和开发，程序源代码100%完全开放的一个采用 PHP 和 MySQL 数据库构建的高效的中文百科建站解决方案，在尊重版权的前提下能极大的满足站长对于网站程序进行二次开发。
仿百度百科 源码php,基于Jquery实现仿百度百科右侧导航代码附源码下载
weixin_35891825的博客
04-11 807
先给大家展示下效果图，看看是不是亲想要实现的效果，如果还满意的话请查看本文详情，同时大家也可以下载源码哦。效果图：代码说明:仿百度百科右侧导航代码jquery插件，这个仿百科右侧导航js代码，在很久以前就像搞个用了，因为这个导航特别适合长篇文档使用，花了半天时间写了这个仿百科导航插件，不过和百度百科比起来还是有点弱，没有实现右侧导航区域滚动的功能，如果您的文档不是超级变态长，应该够用。如果你的导航...
仿维基百科源代码，感觉不错
09-04
仿维基百科源代码，感觉不错找了好久才找到的
js 编辑器代码
07-29
编辑器 文章编辑 js
jQuery仿百度百科右侧浮动菜单特效代码
03-20
【jQuery仿百度百科右侧浮动菜单特效代码】是一种利用JavaScript库jQuery实现的网页交互效果，它模仿了百度百科页面上常见的右侧浮动菜单。这种菜单通常在页面滚动时始终保持在视口的右侧，提供一个快速导航的工具，...
百度百科编辑器
C++与Web
10-30 1766
下载：eFetch_baike 这个不是当前最新版本的百度百科编辑器，不过比网上流传甚广的那个百度百科编辑器不太一样（可以搜出来源代码） 这是我自己从百度百科编辑器的js中修改的，主要改动了插入链接，表格部分（比网上搜出来的那个源代码更实用^O^） 下载到本地解压(确保路径上没有中文字符，空格),然后点击运行start.bat文件,你就会在默认浏览器里看到下图 (与编辑器密
基于Jquery实现仿百度百科右侧导航代码附源码下载
11-22
先给大家展示下效果图，看看是不是亲想要实现的效果，如果还满意的话请查看本文详情，同时大家也可以下载源码哦。 效果图： 效果展示    源码下载 代码说明: 仿百度百科右侧导航代码jquery插件，这个仿百科右侧导航js代码，在很久以前就像搞个用了，因为这个导航特别适合长篇文档使用，花了半天时间写了这个仿百科导航插件，不过和百度百科比起来还是有点弱，没有实现右侧导航区域滚动的功能，如果您的文档不是超级变态长，应该够用。 如果你的导航超级长，可能要用到侧边导航页可以滚动，一般情况下还是用不到，等过些时候有好的实现思路再搞吧，暂时没想到实现右侧导航区域和左侧内容的滚动并且联动的好办法。 注意
单语言/多语言仿百度百科网站源码开发 第四篇
网站开发专家
07-29 503
前面发布了三篇关于百科网站开发的内容，今天接着之前发布的内容，继续更新。这篇主要还是实现了前端部分的功能，先上传效果图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值