把编辑器集成到业务系统时，界面通常要跟着业务产品走。有的产品不希望用户看到厂商品牌，有的页面已经有自己的标题栏，编辑器的标题栏会显得重复，还有的编辑器只占侧边栏的一小块，完整工具栏放不下，还有产品希望文档打开时就使用合适的缩放比例。本文以 Word 为例，介绍配置 Spire.OfficeJS 编辑器界面的方式。下表汇总了 Spire.OfficeJS 的界面配置项，后文逐一说明。

白标

whiteLabel 用来去掉编辑器界面上的厂商品牌。开启后，标题栏右侧的厂商 Logo 会隐藏，“文件 → 关于我们”入口也会消失；其他菜单、工具栏和文档内容不受影响。

common: {
  whiteLabel: true
}

下图是开启前后的对比。

隐藏界面区域

标题栏、状态栏和标尺分别位于编辑器顶部、底部和文档上方。业务页面空间紧张时，可以按需要隐藏其中一项或多项，三项互不影响。

隐藏标题栏

hideTitle 用来隐藏编辑器顶部的标题栏，让文档区多出一些空间。业务页面如果已经有自己的标题栏，可以用这个选项避免重复。

common: {
  header: {
    hideTitle: true
  }
}

下图是隐藏前后的对比。

隐藏状态栏

hideStatusBar 用来隐藏编辑器底部的状态栏。状态栏显示页码、字数、缩放等信息，隐藏后文档区会多出一些高度。

common: {
  hideStatusBar: true
}

下图是隐藏前后的对比。

隐藏标尺

用标尺可以快速调整文档的缩进和页边距。hideRuler 控制标尺的显示，支持 WordJS 和 PresentationJS；默认显示，设为 true 后隐藏。

common: {
  hideRuler: true
}

下图是隐藏前后的对比。

工具栏模式

defToolbar 设置打开文档时的工具栏样式。

common: {
  header: {
    defToolbar: 'short'
  }
}

下图是两种模式的对比。

缩放

文档打开时可以按固定比例显示，也可以让页面自动适应编辑器宽度或整页。前者用 defaultZoom，后者用 zoomFit。

默认缩放

defaultZoom 设置打开文档时的缩放比例。1 表示 100%，1.25 表示 125%。

common: {
  defaultZoom: 1.25
}

下图是 125% 缩放时的状态栏。

适应宽度/适应页面

zoomFit 让文档打开时自动适应编辑器宽度或整页显示。width 表示适应宽度，page 表示适应页面。

common: {
  zoomFit: 'width'
}

下图是适应宽度和适应页面的对比。

完整示例

把上面的配置合在一起，就是完整写法。完整示例如下：

<div id="editor"></div>
<script src="http://LocalExample:3000/web/editors/spireapi/SpireCloudEditor.js"></script>
<script>
var SERVER = 'http://LocalExample:3000';

var config = {
  fileAttrs: {
    fileInfo: { name: 'sample.docx', ext: 'docx' },
    sourceUrl: SERVER + '/samples/sample.docx'
  },
  user: {
    id: 'uid-1',
    name: 'Jonn',
    canSave: true,
    customization: {
      public: {
        common: {
          whiteLabel: true,
          defaultZoom: 1.25, // 固定比例；如需适应容器，改用 zoomFit
          // zoomFit: 'width', // width 适应宽度，page 适应页面
          hideStatusBar: true,
          hideRuler: true,
          header: {
            hideTitle: true,
            defToolbar: 'short'
          }
        }
      }
    }
  },
  editorAttrs: {
    editorMode: 'edit',
    editorType: 'document',
    viewLanguage: 'zh',
    useWebAssemblyDoc: true,
    serverless: {
      useServerless: true,
      baseUrl: SERVER
    }
  }
};

new SpireCloudEditor.OpenApi('editor', config);
</script>

常见问题

修改配置后界面没有变化

原因：浏览器可能缓存了旧页面；使用自带示例系统时，配置在服务启动时读取，修改后需要重启服务才会生效。

解决：先强制刷新页面；使用示例系统时，重启服务后再打开页面。

hideTitle 或 defToolbar 不生效

原因：hideTitle 和 defToolbar 属于标题栏配置，必须放在 common.header 下，直接放在 common 中会被忽略。

解决：按 user.customization.public.common.header.hideTitle 和 user.customization.public.common.header.defToolbar 的结构配置。

开启 whiteLabel 后仍有红色提示或水印

原因：whiteLabel 只移除界面上的厂商品牌，不处理警告水印。没有有效 License 时，文档仍会显示试用提示并限制内容。

解决：联系 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。 购买或申请临时 License，并在 editorAttrs 中填写对应产品的 License Key，例如 Word 的 spireDocJsLicense。