需求
在一个比较窄的页面中使用 wangEditor 做富文本编辑
问题
需要使用wangEditor 所有菜单,但是其菜单栏很宽,会将伸出固定区域,菜单栏不能多行展示
查询解决方式
根据文档发现菜单栏和编辑区域可以分离,并且有源码,这个就比较好弄了,将菜单栏做成可拖动,编辑器垂直滚动就好了.将官方的分离代码考下来直接操作
效果示意
wangEditor.png
使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>wangEditor 菜单和编辑器区域分离</title>
<style type="text/css">
.outer {
position: relative;
}
.toolbar {
width: 768px;
border: 1px solid #ccc;
position: relative;
z-index: 10001;
}
.text {
z-index: 1;
border: 1px solid #ccc;
min-height: 400px;
}
.boxerl {
position: relative;
width: 400px;
overflow-x: hidden;
overflow-y: hidden;
height: 320px;
}
.boxerh {
z-index: 120;
top: 66px;
position: absolute;
width: 400px;
height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
.scollbar {
width: 400px;
overflow-x: auto;
}
.w-e-droplist {
z-index: 10001;
}
.blankinner {
width: 768px;
height: 5px;
border: 1px solid white;
}
</style>
<script type="text/javascript">
function dothis(elem) {
var inner = document.getElementById("inner");
inner.scrollLeft = elem.scrollLeft;
}
</script>
</head>
<body>
<div class="outer">
<div id="scoller" class="scollbar" onscroll="dothis(this)">
<div class="blankinner"></div>
</div>
<div id="inner" class="boxerl">
<!-- onblur="printa()" -->
<div id="div1" class="toolbar"></div>
</div>
<div class="boxerh">
<div id="div2" class="text">
<p>请输入内容</p>
</div>
</div>
</div>
<script type="text/javascript" src="./wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor;
var editor1 = new E("#div1", "#div2"); // 两个参数也可以传入 elem 对象，class 选择器
editor1.create();
</script>
</body>
</html>
网友评论