wangEditor/example/demo/test-fullscreen.html at dev · JavaDevelopRep/wangEditor

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!DOCTYPE html>

<head>

<title>wangEditor 全屏</title>

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

<p>wangEditor 本身不包含“全屏”功能，不过可以很简单的开发出来</p>

<p>注意，全屏模式与<code>max-height</code>有冲突，尽量避免一起使用</p>

</div>

// 创建编辑器

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>

FilesExpand file tree

test-fullscreen.html

Latest commit

History

test-fullscreen.html

File metadata and controls