<!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>