菜单和编辑区域分离
如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样,将编辑区域和菜单分离,也可以实现。
这样,菜单和编辑器区域就是使用者可自己控制的元素,可自定义样式。例如:将菜单fixed、编辑器区域高度自动增加等。
<head>
<style>
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
min-height: 400px;
}
</style>
</head>
<body>
<p>
container 和 toolbar 分开
</p>
<div>
<div id="toolbar-container" class="toolbar"></div>
<p>------ 我是分割线 ------</p>
<div id="text-container" class="text"></div>
</div>
<!-- 引入 wangEditor.min.js -->
<script>
const E = window.wangEditor
const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
editor.create()
</script>
</body>
从上面代码可以看出,菜单和编辑区域其实就是两个单独的 <div>
,位置、尺寸都可以随便定义。