<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>wangEditor 全屏</title>
|
<style type="text/css">
|
#container {
|
width: 800px;
|
margin: 0 auto;
|
}
|
#toolbar-container {
|
border: 1px solid #ccc;
|
background-color: #fff;
|
}
|
#toolbar-container:after {
|
display: table;
|
content: '';
|
clear: both;
|
}
|
#editor-toolbar {
|
float: left;
|
}
|
#btn-container {
|
float: right;
|
text-align: right;
|
}
|
#editor-text {
|
border: 1px solid #ccc;
|
border-top: 0;
|
height: 300px;
|
background-color: #fff;
|
}
|
#cover {
|
display: none;
|
position: fixed;
|
z-index: 100;
|
top: 50px;
|
left: 50px;
|
right: 50px;
|
height: 500px;
|
padding: 20px;
|
background-color: #f1f1f1;
|
}
|
</style>
|
</head>
|
<body>
|
<p>wangEditor 全屏</p>
|
|
<!--非全屏模式-->
|
<div id="container">
|
<!--菜单栏-->
|
<div id="toolbar-container">
|
<div id="editor-toolbar"></div>
|
<div id="btn-container">
|
<button id="btn1">全屏</button>
|
</div>
|
</div>
|
<!--编辑区域-->
|
<div id="editor-text">
|
<p>wangEditor 本身不包含“全屏”功能，不过可以很简单的开发出来</p>
|
<p>注意，全屏模式与<code>max-height</code>有冲突，尽量避免一起使用</p>
|
</div>
|
</div>
|
|
<!--全屏模式-->
|
<div id="cover"></div>
|
|
|
<script type="text/javascript" src="/wangEditor.min.js"></script>
|
<script type="text/javascript">
|
// 创建编辑器
|
var E = window.wangEditor
|
var editor2 = new E('#editor-toolbar', '#editor-text')
|
editor2.create()
|
|
// 获取使用到的元素
|
var toolbarContaner = document.getElementById('toolbar-container')
|
var editorText = document.getElementById('editor-text')
|
var cover = document.getElementById('cover')
|
var container = document.getElementById('container')
|
|
// 全屏事件
|
function doFullScreen() {
|
cover.style.display = 'block'
|
editorText.style.height = '460px';
|
cover.appendChild(toolbarContaner)
|
cover.appendChild(editorText)
|
}
|
|
// 退出全屏事件
|
function unDoFullScreen() {
|
container.appendChild(toolbarContaner)
|
container.appendChild(editorText)
|
editorText.style.height = '300px';
|
cover.style.display = 'none'
|
}
|
|
// 是否是全屏的标志
|
var isFullScreen = false
|
|
// 点击事件
|
var btn1 = document.getElementById('btn1')
|
btn1.addEventListener('click', function () {
|
if (isFullScreen) {
|
isFullScreen = false
|
unDoFullScreen()
|
} else {
|
isFullScreen = true
|
doFullScreen()
|
}
|
}, false)
|
</script>
|
</body>
|
</html>
|
