Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
label {
	cursor:pointer;
}
img {
	display:inline-block;
}
#wrap {
	width:80%;
	height:400px;
	margin:20px auto;
	box-shadow:#272727 0px 0px 5px;
	position:relative;
	overflow:hidden;
}
.menu {
	width:100%;
	height:auto;
	border-bottom:1px solid #272727;
	float:left;
}
.menu > li {
	line-height:49px;
	height:49px;
	float:left;
	padding:0 10px;
	cursor:pointer;
	text-align:center;
	position:relative;
}
.menu > li:after {
	content:"|";
	width:5px;
	position:absolute;
	right:0;
	top:0;
}
.menu > li label {
	width:100%;
	height:100%;
	display:inline-block;
}
.wrap {
	width:100%;
	height:calc(100% - 50px);
	overflow:auto;
	position:relative;
}
.edit_wrap {
	width:96%;
	padding:2%;
	height:auto;
	overflow:auto;
	line-height:1.5;
	outline:none;
}
.btnBox {
	display:none;
	position:absolute;
	left:0;
	top:49px;
	width:100%;
}
.btnBox > li {
	width:100%;
	height:35px;
	line-height:35px;
	text-align:center;
	background:#fff;
}
input {
	border:none;
	width:100%;
	height:100%;
	cursor:pointer;
	outline:none;
	font-size:16px;
	background:inherit;
}
.menu li:hover ul {
	display:block;
	z-index:20;
}
.btnBox  > li:hover,.menu > li:hover {
	background:#CCCCCC;
}
.item {
	list-style-type:square!important;
	margin-left:10px;
}
#dialog {
	width:50%;
	height:150px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-15% 0 0 -25%;
	background:#fff;
	border-radius:10px 10px 0 0;
	overflow:hidden;
	box-shadow:0 0 5px #808080;
	display:none;
}
#dialog h1 {
	width:100%;
	height:45px;
	background:#03A9F4;
	color:#fff;
	text-align:center;
	line-height:45px;
	font-size:20px;
}
#dialog input {
	width:90%;
	height:30px;
	margin:10px auto;
	display:block;
	background:ghostwhite;
	cursor:auto;
}
#dialog span {
	display:block;
	margin:25px auto;
	width:60%;
}
#dialog button {
	display:inline-block;
	outline:none;
	width:40%;
	height:30px;
	border:solid #03A9F4 1px;
	background:#fff;
	cursor:pointer;
}
#dialog button:last-child {
	float:right;
}
#handleWrap {
	position:absolute;
	display:none;
}
#handleWrap ul {
	width:100%;
	height:100%;
	position:relative;
	border:2px solid #03A9F4;
}
#handleWrap ul li {
	width:20px;
	height:20px;
	position:absolute;
	border:1px solid #03A9F4;
	background:#03A9F4;
	border-radius:60%;
	bottom:0;
	right:0;
	margin:0 -10px -10px 0px;
	cursor:move;
}
/*#handleWrap ul li:first-child {
	top:0;
	left:0;
	margin:-10px 0 0 -10px;
	cursor:nw-resize;
}
*/
        /*#handleWrap ul li:nth-child(2) {
	top:0;
	right:0;
	margin:-10px -10px 0 0;
	cursor:ne-resize;
}
*/
        /*#handleWrap ul li:nth-child(3) {
	bottom:0;
	left:0;
	margin:0 0 -10px -10px;
	cursor:sw-resize;
}
*/
        /*#handleWrap ul li:nth-child(4) {
	bottom:0;
	right:0;
	margin:0 -10px -10px 0;
	cursor:se-resize;
}
*/


        @media only screen and (min-width:510px) and (max-width:939px) {
	.wrap {
	height:calc(100% - 100px);
}
}@media only screen and (min-width:321px) and (max-width:509px) {
	.wrap {
	height:calc(100% - 150px);
}
}@media only screen and (min-width:100px) and (max-width:320px) {
	.wrap {
	height:calc(100% - 200px);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

富文本编辑器

2
      qzuser0
      2017/10/27 14:00:19
      坠落的边儿?0
      2017/10/26 11:24:26