如何为Summernote文本编辑器设置A4纸布局及集成指定CSS样式

嘿，我来帮你搞定Summernote的A4纸布局问题！其实实现起来并不复杂，咱们一步步拆解：

Summernote的编辑区域本质是一个内嵌iframe里的<body>标签，所以我们的核心操作就是给这个编辑区域的内容套上一个模拟A4尺寸的容器，再通过CSS来还原纸张的视觉效果（比如白色背景、阴影、固定尺寸），甚至可以加个切换按钮来自由开启/关闭A4布局模式。

1. 自定义Summernote初始化配置 #

先给编辑器加个自定义按钮，方便切换A4布局，同时在初始化时做好基础准备：

$(document).ready(function() {
  $('#summernote').summernote({
    height: 900, // 调整编辑器高度适配A4纵向尺寸
    callbacks: {
      onInit: function() {
        // 初始化时默认插入A4容器
        const editorBody = $(this).summernote('editor').find('body');
        editorBody.append('<div class="a4-paper"></div>');
        // 让光标自动进入A4容器，直接开始编辑
        editorBody.find('.a4-paper').focus();
      }
    },
    // 给工具栏加个自定义的A4切换按钮
    toolbar: [
      ['style', ['bold', 'italic', 'underline']],
      ['layout', ['toggleA4']]
    ],
    buttons: {
      toggleA4: function(context) {
        const ui = $.summernote.ui;
        const button = ui.button({
          contents: '<i class="fa fa-file-o"></i> 切换A4布局',
          tooltip: '开启/关闭A4纸张模式',
          click: function() {
            const editorBody = context.layoutInfo.editor.find('body');
            editorBody.toggleClass('a4-mode');
            
            if (editorBody.hasClass('a4-mode')) {
              // 开启模式时如果没有A4容器就创建一个
              if (!editorBody.find('.a4-paper').length) {
                editorBody.append('<div class="a4-paper"></div>');
                editorBody.find('.a4-paper').focus();
              }
            } else {
              // 关闭模式时移除A4容器
              editorBody.find('.a4-paper').remove();
            }
          }
        });
        return button.render();
      }
    }
  });
});

2. 编写A4纸效果的CSS #

你提到的A4纸CSS完全可以集成进来，下面是一套通用的模拟样式，你可以直接替换成自己的：

/* 编辑器区域的基础背景，模拟桌面效果 */
.note-editor .note-editable {
  background-color: #f0f0f0;
  padding: 30px;
}

/* A4纸张核心样式 */
.note-editor .note-editable .a4-paper {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 20px;
  padding: 20mm;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

/* 开启A4模式时的编辑器样式优化 */
.note-editor .note-editable.a4-mode {
  background-color: #e5e5e5;
}

/* 确保A4容器内的文本排版正常 */
.note-editor .note-editable .a4-paper p {
  margin: 0 0 12px 0;
  line-height: 1.6;
}

3. 打印适配优化 #

如果需要支持直接打印A4内容，记得补充打印样式：

@media print {
  .note-editor .note-toolbar, .note-editor .note-statusbar {
    display: none; /* 打印时隐藏工具栏和状态栏 */
  }
  .note-editor .note-editable {
    background: none;
    padding: 0;
  }
  .note-editor .note-editable .a4-paper {
    box-shadow: none;
    margin: 0;
    width: auto;
    min-height: auto;
    page-break-after: always; /* 每张A4纸自动分页 */
  }
}

当然可以！你只需要把自己的A4纸CSS规则，调整为针对Summernote编辑区域的元素即可，确保样式优先级足够覆盖Summernote的默认样式。比如你的原有CSS是：

.custom-a4 {
width: 210mm;
height: 297mm;
background: #fff;
border: 1px solid #ddd;
}

只需要改成这样就能适配Summernote：

.note-editor .note-editable .custom-a4 {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  border: 1px solid #ddd;
  /* 补充其他你需要的样式，比如内边距、阴影 */
}

之后在Summernote的初始化或按钮逻辑中，把这个类名替换掉示例中的a4-paper就可以了。

内容的提问来源于stack exchange，提问作者Veasna Heng