在当今数字化办公时代,文档编辑器已成为各类企业、组织和开发者不可或缺的工具之一。ONLYOFFICE 文档提供的功能丰富且强大的文档编辑 API,让开发者能够根据自己的产品需求和品牌特点,定制编辑器界面,实现品牌化展示,为用户提供了一个深度契合其品牌形象和业务需求的文档操作体验。下面一起来了解ONLYOFFICE文档API,帮助实现编辑器定制化。

关于 ONLYOFFICE 文档
ONLYOFFICE 是一个开源项目,专注于高级和安全的文档处理和协作。全球超过 1500 万用户,是在线办公领域的创新者。
ONLYOFFICE 文档提供文本文档、电子表格、幻灯片、表单和 PDF 编辑器 。ONLYOFFICE 文档高度兼容微软 Office 格式 ,并提供数百种格式化和样式工具,以及多种协作功能,包括实时和段落锁定两种共同编辑模式、评论和审阅、内置聊天、版本历史等。
该办公套件可以连接到多个云平台,如 WordPress、Seafile、Moodle等,也可以集成到您自有的应用程序、网站或其他解决方案,为其提供强大的编辑功能,还提供个性化的定制功能来满足产品的品牌化需求。
ONLYOFFICE 可以在任何平台上部署,包括 Windows、Linux、macOS、Android,也可以在任何设备上使用。在线、移动和桌面版本均使用同一引擎,确保离线和在线工作之间无缝切换。
下面我们一起了解关于编辑器自定义的API。
什么是品牌自定义
品牌自定义是指根据企业自身的品牌形象和风格,对相关界面或元素进行个性化设置的功能。在自定义部分,您可以对编辑器界面进行调整,使其与其他产品(如果有)在视觉风格上保持一致,实现品牌整体形象的统一。同时,您还可以灵活设置是否显示附加按钮和链接,更换徽标,以及修改编辑器所有者信息等细节内容,以此来打造符合品牌特色的专属编辑环境,提升品牌辨识度和用户体验。ONLYOFFICE 开发者版当前可支持标准品牌定制 和白标定制,满足不同程度的定制化需求。
标准品牌定制
编辑器开发者版本可以根据您的需求进行标准品牌定制,包括:定制编辑器的行为和外观。
隐藏 功能 提示
editorConfig.customization.features.featuresTips 参数允许在更新后首次加载编辑器时启用或禁用有关新功能的工具提示。默认值为 true
。
显示电子表格滚动条
从 8.3 版本开始,可以定义在加载电子表格编辑器时是否自动显示或隐藏水平/垂直滚动条。查看 editorConfig.customization.showHorizontalScroll 和 editorConfig.customization.showVerticalScroll 来控制这些参数。默认值为 true
.
演示文稿幻灯片背景
使用 editorConfig.customization.slidePlayerBackground 参数以 HEX、RGB 或 RGBA 格式定义幻灯片背景颜色。例如,#ff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)。
showHorizontalScroll: true,
showVerticalScroll: true,
slidePlayerBackground: "#000000",
文档标题颜色
使用 editorConfig.customization.wordHeadingsColor 参数自定义文档编辑器中默认标题颜色,并允许使用HEX 颜色规范(十六进制颜色)。
紧凑文档标题
你可以选择附加操作按钮的位置,在编辑器窗口标题的上部靠近徽标 (false
) ,或是显示在工具栏 (true
),使标题更紧凑。默认值为 false
。

查看器的紧凑工具栏
editorConfig.customization.compactToolbar 参数现在支持查看器模式,允许在完整工具栏和紧凑工具栏之间切换。查看模式的默认值为 true
。

移动编辑器中的信息按钮
使用 editorConfig.customization.mobile.info 决定显示 或隐藏 移动编辑器中"文档信息 "。默认值为 false
。
指针模式
使用 editorConfig.customization.pointerMode 参数调整演示文稿查看器中的指针模式(选择或手形)。默认值为 select
。

自定义展示信息
您可以自定义编辑器关于部分中显示的信息,包括文档授权者的联系地址、公司信息、公司logo、电子邮箱、公司名称和联系电话、网址等。这部分信息对所有编辑器用户可见。
const customer = {
address: "My City, 123a-45",
info: "Some additional information",
logo: "https://example.com/logo-big.png",
logoDark: "https://example.com/dark-logo-big.png",
mail: "[email protected]",
name: "John Smith and Co.",
phone: "123456789",
www: "example.com",
}
自定义地址
editorConfig.customization.customer.address 参数授予编辑者或编辑者作者访问权限的公司或个人的联系地址。
示例 : My City, 123a-45
自定义信息
关于您希望其他人知道的公司或个人的一些附加信息。
示例 : Some additional information
自定义logo
editorConfig.customization.customer.logo 参数支持设置图像徽标,图片 logo 推荐透明背景的 .png 格式,尺寸为432x70。editorConfig.customization.customer.logoDark支持深色主题图像徽标
示例1 : https://example.com/logo-big.png
示例2 : https://example.com/dark-logo-big.png
自定义电子邮箱
使用editorConfig.customization.customer.mail授予编辑者或编辑者作者访问权限的公司或个人的电子邮件地址。
示例 : [email protected]
自定义名称
使用editorConfig.customization.customer.name授予编辑者或编辑者作者访问权限的公司或个人的名称。
示例 : John Smith and Co.
自定义联系方式
使用editorConfig.customization.customer.phone授予编辑器或编辑器作者访问权限的公司或个人的电话。
示例 : 123456789
自定义网址
使用editorConfig.customization.customer.www添加上述公司或个人的主页地址。
示例 : example.com
自定义信息的展示示例如下:

自定义品牌logo
更改编辑器标题左上角的图像文件。推荐的图像高度为 20 像素。
请注意, 此参数仅适用于 ONLYOFFICE 文档开发者版的编辑,以及移动编辑器。
示例:
const logo = {
image: "https://example.com/logo.png",
imageDark: "https://example.com/dark-logo.png",
imageLight: "https://example.com/light-logo.png",
url: "https://example.com",
visible: true,
}

logo图标
customization-standard-branding/#logoimage使用editorConfig.customization.logo.image在通用工作模式(即所有编辑器的查看和编辑模式)或嵌入模式(请参阅配置部分以了解如何定义嵌入文档类型)中显示的图像文件的路径。图片必须具有以下尺寸:172x40.
示例 : https://example.com/logo.png
logo.深色图标
使用editorConfig.customization.logo.imageDark在深色标题的图像文件的路径(例如,在深色主题中或带有彩色标题的主题中)。图像必须具有以下尺寸:172x40。
示例 : https://example.com/dark-logo.png
logo.浅色图标
使用editorConfig.customization.logo.imageLight在浅色标题的图像文件的路径(例如,在灰色主题中)。图像必须具有以下尺寸:172x40。
示例 : https://example.com/light-logo.png
ONLYOFFICE 文档 API 提供了全面且细致的品牌化定制选项,涵盖了从界面元素的显示与隐藏、布局调整到品牌信息的深度融入等各个方面。无论是企业内部系统集成、独立软件产品开发,还是 SaaS 平台的文档服务模块定制,都能轻松应对。
立即定制您的编辑器界面
想要将 ONLYOFFICE 文档编辑器集成到您的产品中吗?请访问我们的官方网站,下载最新版本的 ONLYOFFICE 文档开发者版。点击下方链接,申请免费试用30天: