菜单和编辑区域分离

如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。

这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单fixed、编辑器区域高度自动增加等。

菜单和编辑区域分离 - 图1

  1. <head>
  2.     <style>
  3.         .toolbar {
  4.             border: 1px solid #ccc;
  5.         }
  6.         .text {
  7.             border: 1px solid #ccc;
  8.             min-height: 400px;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <p>
  14.         container 和 toolbar 分开
  15.     </p>
  16.     <div>
  17.         <div id="toolbar-container" class="toolbar"></div>
  18.         <p>------ 我是分割线 ------</p>
  19.         <div id="text-container" class="text"></div>
  20.     </div>
  22.     <!-- 引入 wangEditor.min.js -->
  23.     <script>
  24.         const E = window.wangEditor
  25.         const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
  26.         editor.create()
  27.     </script>
  28. </body>

从上面代码可以看出，菜单和编辑区域其实就是两个单独的 <div>，位置、尺寸都可以随便定义。