技术问询：如何使用jQuery分离Summernote工具栏与编辑区域

嘿，我来帮你搞定把Summernote工具栏和编辑区分开的需求——就像你展示的那样，把工具栏塞进导航栏，编辑区放在页面头部下方。其实操作起来没那么复杂，跟着下面的步骤来就行：

1. 先搭好HTML结构 #

首先得在页面里分别准备好工具栏容器和编辑区容器，把工具栏放到你想要的导航栏位置，编辑区放在页面主体区域：

<!-- 导航栏中的工具栏容器 -->
<nav class="navbar">
  <div id="summernote-toolbar"></div>
</nav>

<!-- 页面主体的编辑区域 -->
<div id="summernote-editor"></div>

2. 初始化Summernote时指定工具栏容器 #

Summernote自带了toolbarContainer这个配置项，专门用来指定工具栏要渲染到哪个DOM元素里。初始化编辑区的时候，把这个选项指向我们刚才准备的工具栏容器就行：

$(document).ready(function() {
  $('#summernote-editor').summernote({
    // 关键配置：指定工具栏的渲染容器
    toolbarContainer: '#summernote-toolbar',
    // 可以根据自己的需求自定义工具栏按钮
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
    ]
  });
});

3. 样式适配（可选但建议做） #

默认的Summernote工具栏样式可能和你的导航栏风格不搭，所以加一点CSS调整，让两者融合得更自然：

/* 让工具栏适配导航栏的布局，去掉默认边框和背景 */
#summernote-toolbar .note-toolbar {
  border: none;
  background-color: transparent;
  padding: 0;
}

/* 调整工具栏按钮的样式，和导航栏风格统一 */
#summernote-toolbar .note-btn {
  margin: 0 2px;
  border-radius: 4px;
}

/* 防止编辑区内容被导航栏遮挡，加上边距 */
#summernote-editor {
  margin-top: 25px;
}

4. 几个要注意的小细节 #

• 一定要确保#summernote-toolbar这个容器在初始化Summernote之前就已经存在于DOM中，不然会找不到元素，工具栏就显示不出来啦。
• 如果你的导航栏是固定定位（position: fixed），记得给编辑区设置足够的上边距，避免内容被导航栏挡住。
• 如果你用了Summernote的第三方插件，最好测试一下兼容性，有些插件可能依赖默认的工具栏结构。

这样设置之后，Summernote的工具栏就会乖乖渲染到你指定的导航栏容器里，编辑区则在页面主体部分，完美实现分离布局啦！

内容的提问来源于stack exchange，提问作者Shah Hassan