<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>目录</title>
<style type="text/css">
/*初始化*/
html,body,header,div,ul,li,dl,dd,p,input,iframe{
padding: 0px;
margin: 0px;
}
li{
list-style-type: none;
}
input{
outline: none;
}
@font-face {
font-family: 'iconfont'; /* project id 666160 */
src: url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.eot');
src: url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.woff') format('woff'),
url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.ttf') format('truetype'),
url('//at.alicdn.com/t/font_666160_a4uzukifqztlc8fr.svg#iconfont') format('svg');
}
/*去除float clear=both display:table 但是会生成bfc 设置了父元素,子元素也会有。所以最好设置的范围最小 */
/*bfc 会是上下边距重叠*/
.clearFix::after{
content: '';
display: table;
clear: both;
}
a{
text-decoration: none;
cursor: pointer;
}
</style><!-- 初始化,基本 -->
<style type="text/css">
html,body{
height: 100%;
font-family: Microsoft Yahei,Lato,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Tahoma,sans-serif!important;
}
div{
}
/*--table布局,只要设置table-cell的一个宽度就可以自适应*/
body{
font-family: Microsoft Yahei,Lato,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Tahoma,sans-serif!important;
}
::-webkit-scrollbar
{
width: 2px;
height: 2px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFF;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #4499ee;
}
.table{
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5px;
overflow-wrap: break-word;
font-size: 16px;
}
.left{
box-sizing: border-box;
width: 50px;
height: 100%;
display: table-cell;
padding: 2px 0px;
position: relative;
text-align: left;
border-radius:10px;
border-bottom-right-radius: 0px;
background-color:#333;
white-space: nowrap;
transition: all 0.1s;
transition-timing-function: ease-in-out;
}
.left:hover{
width: 200px;
text-align: center;
}
.searchBox .search{
border: none;
}
.searchBox input{
box-sizing: border-box;
text-align:center;
height:40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:1px solid #c8cccf;
margin-top: -2px;
color:#6a6f77;
-web-kit-appearance:none;
-moz-appearance: none;
display:block;
outline:none;
padding:0 1em;
text-decoration:none;
width:100%;
}
.searchIndex{
position: absolute;
top: 40px;
bottom:2px;
width:100%;
box-sizing: border-box;
border: none;
overflow-x: hidden;
overflow-y: scroll;
}
ul{
margin: 5px 2%;
}
ul li{
color:#ccc;
margin-bottom: 5px;
cursor: pointer;
}
li a{
color: inherit;
display: inline-block;
text-align: inherit;
text-overflow: ellipsis;
width: 100%;
}
li:hover{
color: #fff;
}
.mark{
width: 95%;
left: 2.5%;
border: 1px solid red;
box-sizing: border-box;
position: absolute;
top: 0px;
display: none;
transition: all 1s;
transition-timing-function: ease-in-out;
}
.right{
display: table-cell;
position: relative;
box-sizing: border-box;
height: 100%;
border: 1px solid grey;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
}
.right .content{
position: absolute;
top:0px;
bottom: 40px;
width: 100%;
border-top-right-radius: 10px;
border-top-left-radius: 10px;/*要重写,不然还是会出错*/
box-sizing: border-box;
}
iframe{
height: 100%;
width: 100%;
border: none;
overflow-y: scroll;
}
.right .edit{
position: absolute;
bottom:0px;
width: 100%;
height: 40px;
box-sizing: border-box;
border: 1px solid grey;
border-left: none;
border-bottom-right-radius: 10px;
}
.edit ul{
height: 100%;
}
.edit li{
float: left;
height: 100%;
padding: 5px 20px;
}
.edit li span{
line-height: 100%;
height: 20px;
box-sizing: border-box;
}
.edit li input{
height: 25px;
}
.edit li button{
text-align: center;
display: inline-block;
width: 60px;
height: 30px;
line-height:1;
}
.editDiv{
display: none;
position: absolute;
top:0%;
bottom: 0%;
width: 100%;
box-sizing: border-box;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #00bb50;
z-index: 100;
}
.editDiv textarea{
width: 100%;
height: 100%;
font-size: 16px;
border: none;
box-sizing: border-box;
}
.editModule{
width: 40px;
position: absolute;
right: 1px;
top:100px;
background-color: grey;
text-align: left;
white-space: nowrap;
transition: all 0.5s;
transition-timing-function: ease-in-out;
}
.editModule:hover{
width: 100px;
text-align: center;
}
.editModule span{
display: block;
border: 1px solid #6a6f77;
}
.editModule ul{
height: 300px;
}
.editModule li{
padding: 10px auto;
}
</style>
</head>
<body>
<div class="table">
<div class="left">
<div class="searchBox">
<div class="search">
<input type="search" placeholder="搜索一下"><!-- placeholder在获得焦点时会消失 -->
</div>
</div>
<div class="searchIndex" id="searchIndex">
<ul>
<li><a href="javascript:routing1('http://www.baidu.com')">百度一下</a></li>
<li><a href="javascript:routing1('http://www.w3school.com.cn/html/index.asp')">W3School</a></li>
<li><a href="javascript:routing1('http://nodejs.cn/api/')">NodeJs</a></li>
<hr>
</ul>
<ul>
<li><a href="javascript:routing('h1')">第一个</a></li>
<li><a href="javascript:routing('h2')">第二个</a></li>
<li><a href="javascript:routing('h3')">第三个分发</a></li>
<li><a href="javascript:routing('h4')">第四个我仍然想</a></li>
<li><a href="javascript:routing('xiaomi')">第五个政治</a></li>
<li><a href="javascript:routing('test')">第六个安慰安慰而为</a></li>
</ul>
<div class="mark" id="searchIndexMark"></div><!--用于红色标记-->
</div>
</div>
<div class="right">
<div class="content" id="content" >
<iframe src="http://www.baidu.com" id="iframe" name="iframe"></iframe>
<div class="editDiv" id="editDiv">
<textarea id="editDivPre"></textarea>
<div class="editModule" id="editModule">
<span>模板</span>
<ul>
<li data-attribute="hs">列表</li>
<li data-attribute="dm">代码</li>
<li data-attribute="qt">注意事项</li>
<li data-attribute="qt">相关链接</li>
</ul>
</div>
</div>
</div >
<div class="edit">
<ul>
<li>
<span>目录</span><input type="text">
<button οnclick="editAdd()" id="btAdd">添加</button>
</li>
<li>
<button οnclick="editAlter()" id="btAlter">修改</button>
</li>
<li>
<button οnclick="editOpen()" id="btOpen" disabled>打开</button>
</li>
<li>
<button οnclick="editDelete()" id="btDel">删除</button>
</li>
<li>
<button οnclick="editFin()" id="btFin" disabled>提交</button>
</li>
</ul>
</div>
</div>
</div>
</body>
<script>
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var Ele={
leftIframe:document.getElementById("iframe"),//内嵌iframe
editDiv:document.getElementById("editDiv"),//编辑DIV
editDivPre:document.getElementById("editDivPre"),//编辑textarea
//leftFrameInnerEle:document.getElementById("iframe").contentWindow.document,//iframe内容,这个不随时更新
searchIndexUl :document.getElementById("searchIndex").getElementsByTagName("ul"),//搜索索引ul 是集合
searchIndexMark:document.getElementById("searchIndexMark"),//索引部分Mark
btAdd:document.getElementById("btAdd"),
btAlter:document.getElementById("btAlter"),
btDel:document.getElementById("btDel"),
btFin:document.getElementById("btFin"),
btOpen:document.getElementById("btOpen"),
editModule:document.getElementById("editModule")
}
var Config={
}
var V={
btOpenValue:"",//编辑器内容
src:"",//在编辑按钮时,保存被编辑对应的
srcClick:"",//每次点击了索引li都会保存起来
srcInnerText:"",//在编辑按钮时,保存被编辑对应的
srcClickInnerText:"",//每次点击了索引li都会保存起来
selectionStart:0//textarea 光标位置
}
function routing1(path,value){
console.groupCollapsed(arguments.callee.name+"函数在执行")
console.log("path:"+path)
console.groupEnd()
if(value!=undefined){
path=path+"/s?wd="+value;
}
Ele.leftIframe.setAttribute("src",path);//会让iframe刷新
}
function routing(path,value){//value是post字符串key=value&key1=value1
console.groupCollapsed(arguments.callee.name+"函数在执行")
console.log("path:"+path)
console.log("value:"+value)
console.groupEnd()
var xhr= xmlhttp;
xhr.open("post",path,true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
Ele.leftIframe.setAttribute("src",path);//会让iframe刷新 // console.log(xhr.responseText)
//对Left的编辑区内容和按钮设置
Ele.editDiv.style.display="none";//关闭editDiv
Ele.btOpen.innerHTML="打开";
Ele.btOpen.disabled=false;//可以点击
Ele.btAlter.disabled=false;//可以点击
Ele.btFin.disabled=true;//不可以点击
V.btOpenValue= Ele.editDivPre.value;//保存起来原来编辑内容
V.srcClick=path;
}
};
xhr.send(value)//post方法将发送的参数写在这里 //xhr.send(null);//get方法下使用这个发送Ajax请求
}
function editAdd(){
Ele.editDiv.style.display="inline-block";
var textStr="/*创建于"+new Date()+"*/"+"\n"
Ele.editDivPre.value=textStr;
var indexStart=Ele.editDivPre.value.length;
Ele.editDivPre.selectionStart=indexStart;
Ele.editDivPre.selectionEnd=indexStart;
V.selectionStart=indexStart;
Ele.editDivPre.focus();//必须放在对改元素修改的后面
}
function editAlter(){
Ele.editDivPre.value=Ele.leftIframe.contentWindow.document.getElementsByTagName("html")[0].outerHTML;//内容要实时更新,不要保存到变量那里
Ele.editDiv.style.display="inline-block";//打开editDiv
var indexStart=Ele.editDivPre.value.indexOf("<body>")+6;
console.log("进编辑器查找到body:"+indexStart)
Ele.editDivPre.selectionStart=indexStart;
Ele.editDivPre.selectionEnd=indexStart;
V.selectionStart=indexStart;
Ele.editDivPre.focus();//必须放在对改元素修改的后面
Ele.btOpen.innerHTML="关闭";
Ele.btOpen.disabled=false;//可以点击
Ele.btAlter.disabled=true;//不可以点击
Ele.btFin.disabled=false;//可以点击
V.btOpenValue=Ele.editDivPre.value;//保存起来
V.src= V.srcClick;//保存变量,上次点击保存对的src
V.srcInnerText= V.srcClickInnerText;//保存变量,上次点击保存对的li的文本
console.log("修改按钮,对应-->src:"+V.src+"标题:"+V.srcInnerText);
}
function editDelete(){
}
function editFin(){
var path=V.src;//在编辑按钮触发时保存该src,用于提交的时候正确提交
console.log("提交按钮,对应-->src:"+V.src+"标题:"+V.srcInnerText)
var value=Ele.editDivPre.value;
V.btOpenValue=value;//保存起来
value=encodeURIComponent(value);
value="write="+value;
routing(path,value);
Ele.editDiv.style.display="none";//关闭editDiv
Ele.btOpen.innerHTML="打开";
Ele.btOpen.disabled=false;//可以点击
Ele.btAlter.disabled=false;//可以点击
Ele.btFin.disabled=true;//不可以点击
}
function editOpen(){
if(Ele.btOpen.innerHTML=="打开"){
Ele.editDiv.style.display="inline-block";//打开editDiv
Ele.btOpen.innerHTML="关闭";
Ele.btOpen.disabled=false;//可以点击
Ele.btAlter.disabled=true;//不可以点击
Ele.btFin.disabled=false;//可以点击
Ele.editDivPre.value=V.btOpenValue;//赋值
console.log("打开按钮,对应-->src:"+V.src+"标题:"+V.srcInnerText)
}else{
Ele.editDiv.style.display="none";//打开editDiv
Ele.btOpen.innerHTML="打开";
Ele.btOpen.disabled=false;//可以点击
Ele.btAlter.disabled=false;//可以点击
Ele.btFin.disabled=true;//不可以点击
V.btOpenValue=Ele.editDivPre.value;//保存
console.log("关闭按钮,对应-->src:"+V.src+"标题:"+V.srcInnerText)
}
}
(function init(){
//设置搜索索引 li的点击事件
(function() {
var ulLength=Ele.searchIndexUl.length;
function clickFun(e){
var mark=Ele.searchIndexMark;
var LiHeight=e.target.parentNode.clientHeight;//宽度,对于非嵌入style的获取方式
var liTop=e.target.parentNode.offsetTop;
V.srcClickInnerText=e.target.innerText;
mark.style.height=LiHeight+2+"px";//增加border的宽度
mark.style.display="inline-block";
mark.style.top=(liTop-1)+"px";//消除border的宽度
}
var searchUls=Ele.searchIndexUl;
for(var i=0;i<ulLength;i++){
var lis=searchUls[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].addEventListener("click",clickFun,false);
}
}
}());
//设置editModule的li的点击事件
(function(){
function clickFun(e){
var ele= e.target;
var dataAttribute=ele.getAttribute("data-attribute");
var textStr=Ele.editDivPre.value;
var inset="";
console.log("--->"+dataAttribute+"<");
switch (dataAttribute){
case "hs":{
inset="<ul><br><li></li></ul>";
break;
}
case "dm":{
inset="dmdmdmdmmdmdmd";
break;
}
default:{
inset="<ul>\n\t<li>gggg</li>\n</ul>"
}
}
var subStr1=textStr.substring(0, V.selectionStart);
var subStr2=textStr.substring(V.selectionStart,textStr.length);
setTimeout(function(){
V.selectionStart=Ele.editDivPre.selectionStart+5;
Ele.editDivPre.selectionStart= V.selectionStart; //选中区域左边界
Ele.editDivPre.selectionEnd= V.selectionStart; //选中区域右边界
//Ele.editDivPre.focus();
},1000)
Ele.editDivPre.value=subStr1+inset+subStr2;//一定要先修改好内容,再设置光标
Ele.editDivPre.selectionStart= V.selectionStart; //选中区域左边界
Ele.editDivPre.selectionEnd= V.selectionStart+inset.length; //选中区域右边界
Ele.editDivPre.focus();
console.log( Ele.editDivPre.selectionStart+'---'+Ele.editDivPre.selectionEnd)
}
var mdUl=Ele.editModule.getElementsByTagName("ul");
for(var i=0;i<mdUl.length;i++){
var lis=mdUl[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].addEventListener("click",clickFun,false);
}
}
})();
(function(){
Ele.editDivPre.addEventListener("click",function(e) {
V.selectionStart=e.target.selectionStart;
console.log( V.selectionStart)
});//点击区域,获得光标位置
Ele.editDivPre.addEventListener("input",function(e) {
V.selectionStart=e.target.selectionStart;
console.log( V.selectionStart)
})
})()
})()
</script>
</html>