设置头像
下图和步骤说明了如何在 ONLYOFFICE 文档 中设置用户头像。
- 使用
editorConfig.user.image字段,在初始化时为文档编辑器设置当前用户的头像 URL。 - 当用户打开评论或共同编辑者列表时,文档编辑器触发
onRequestUsers事件,请求其他用户的数据。 - 文档管理器获取用户数据(包括姓名和头像 URL),并通过调用
setUsers方法将其传回文档编辑器。 - 文档编辑器在用户姓名旁边显示所有用户的头像。
在实践中如何做到这一点
-
创建一个空的
.html文件来打开文档。 -
要设置当前用户头像,请使用初始化配置的 editorConfig.user.image 字段:
const config = {editorConfig: {user: {group: "Group1",id: "78e1e841",image: "https://example.com/url-to-user-avatar.png",name: "John Smith",},},};const docEditor = new DocsAPI.DocEditor("placeholder", config); -
在初始化脚本中,指定用于请求用户头像的事件处理程序。当用户打开评论或共同编辑者列表时,将触发
onRequestUsers事件。事件的data.c参数设置为"info",data.id包含需要头像的用户 ID。
function onRequestUsers(event) {const c = event.data.c;const id = event.data.id;}const config = {events: {onRequestUsers,},};const docEditor = new DocsAPI.DocEditor("placeholder", config); -
在事件处理程序中,调用
setUsers方法将用户数据传回编辑器:docEditor.setUsers({c: "info",users: [{email: "john@example.com",id: "78e1e841",image: "https://example.com/url-to-user-avatar1.png",name: "John Smith",},{email: "kate@example.com",id: "F89d8069ba2b",image: "https://example.com/url-to-user-avatar2.png",name: "Kate Cage",},],});
将 example.com 替换为提供头像图片的服务器地址,即您的文档存储服务或文档编辑服务可以访问的其他服务器。有关 ONLYOFFICE 文档 客户端-服务器交互的更多信息,请参阅工作原理。