菜單和編輯區域分離 · wangEditor3使用手冊

# 菜單和編輯區域分離如果你想要像知乎專欄、簡書、石墨、網易云筆記這些編輯頁面一樣，將編輯區域和菜單分離，也可以實現。這樣，菜單和編輯器區域就是使用者可自己控制的元素，可自定義樣式。例如：將菜單`fixed`、編輯器區域高度自動增加等 ## 代碼示例 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor 菜單和編輯器區域分離</title> <style type="text/css"> .toolbar { border: 1px solid #ccc; } .text { border: 1px solid #ccc; height: 400px; } </style> </head> <body> <div id="div1" class="toolbar"> </div> <div style="padding: 5px 0; color: #ccc">中間隔離帶</div> <div id="div2" class="text">  <p>請輸入內容</p> </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> ``` ## 顯示效果從上面代碼可以看出，菜單和編輯區域其實就是兩個單獨的`<div>`，位置、尺寸都可以隨便定義。 ![](http://images2015.cnblogs.com/blog/138012/201705/138012-20170531224756289-7442240.png)