文档反馈
文档反馈
互动白板 > 进阶教程 > 文档与页面

基本结构

云信互动白板中有两层结构。第一层是文档。第二层是页面。在文档内可以添加，删除页面。

刚进入房间时，房间内有一份默认文档，默认文档内有一块白板。通过上传并添加文件(ppt, pptx, doc, docx, pdf)，会在房间内加入文档。

下面假设添加了名为"力学.pdf"的文件。该文档内有3个页面，则其房间内结构应该为：

-- whiteboard (默认文档)
    -- page 1
-- 力学.pdf
    -- page 1
    -- page 2
    -- page 3

文档操作

工具栏配置

工具栏中有两个图标和文档操作有关：docUpload和docSelect。

docUpload图标点击后，显示一个文档库弹窗。该弹窗内文档为当前用户已经上传并转码的文档。用户可以选择该弹窗内文档，点击[使用]按钮，将该文件加入到白板房间中。 docSelect是一个选择下拉框。用户可以通过该下拉框切换房间中的文档，或者删除文档。

items: [
    //其他工具
    {
        tool: 'docUpload',
        hint: '文档上传'
    },
    {
        tool: 'docSelect'
    }
]

docUpload添加第三方转码文件

若用户使用自己的转码服务，或者用户通过公共账户转码课件，然后需要将课件传入教师的文档库中，可以使用下面的接口在工具栏的文档上传弹窗中添加这些文档。

toolCollection.setDefaultDocList(docList: IDocList)

type IDocList = {
    fileType: 'pdf' | 'ppt' | 'doc',
    name: string,
    params: {
        url: string,
        width: number,
        height: number
    }[]
}[]

toolCollection.setDefaultDocList([
    {
        fileType: 'pdf',
        name: '示例pdf',
        params: [
            {
                url: 'https://nim.nosdn.127.net/36b5e510-79e3-418f-9b67-41c4275f1be4_1_1.jpg',
                width: 1000,
                height: 1000
            },
            {
                url: 'https://nim.nosdn.127.net/36b5e510-79e3-418f-9b67-41c4275f1be4_1_2.jpg',
                width: 1000,
                height: 1000
            }
        ]
    },
    {
        fileType: 'doc',
        name: '示例doc',
        params: [
            {
                url: 'https://nim.nosdn.127.net/36b5e510-79e3-418f-9b67-41c4275f1be4_1_3.jpg',
                width: 1000,
                height: 1000
            },
            {
                url: 'https://nim.nosdn.127.net/36b5e510-79e3-418f-9b67-41c4275f1be4_1_4.jpg',
                width: 1000,
                height: 1000
            }
        ]
    }
])

添加文档

用户可以通过addBoard添加空白文档，或者通过addDoc添加带有多页图片的文档

//添加名为[力学.pdf]的文档，文档内共有2页白板
drawPlugin.addBoard('力学.pdf', 2)
drawPlugin.addDoc({
    docName: '力学.pdf',
    params: [
        {
            url: 'https://xxx1.jpg',
            width: 1000,
            height: 1000
        },
        {
            url: 'https://xxx2.jpg',
            width: 1000,
            height: 1000
        }
    ]
})

删除文档

工具栏中docSelect子组件可以删除文档。也可以通过调用deleteBoard删除文档

drawPlugin.deleteBoard('力学.pdf')

跳转文档

工具栏中docSelect子组件可以切换文档。也可以通过调用gotoBoard切换文档

drawPlugin.gotoBoard('力学.pdf')

文档信息

getBoardInfos会返回房间内的文档信息。

boardDisplayNames: (2) ["whiteboard", "ppt_sample.pdf"] boardNames: (2) ["whiteboard", "ppt_sample.pdf_1622962933286"] currBoard: "ppt_sample.pdf_1622962933286" currBoardDisplayName: "ppt_sample.pdf"

/**
 *  // 当前文档的文档名
 *  currBoard: "ppt_sample.pdf_1622962933286"
 *
 *  // 文档的显示名
 *  currBoardDisplayName: "ppt_sample.pdf"
 *
 *  //所有文档的名称
 *  boardNames: ["whiteboard", "ppt_sample.pdf_1622962933286"]
 *
 *  //所有文档的显示名
 *  boardDisplayNames: ["whiteboard", "ppt_sample.pdf"]
 */
drawPlugin.getBoardInfos()

页面操作

每个文档内有多个页面。工具栏提供了下面的页面控制工具。其中预览窗口内有添加，删除页面的按钮。

工具栏配置

items: [
    //其他工具
    {
        tool: 'firstPage',
        hint: '第一页'
    },
    {
        tool: 'prevPage',
        hint: '上一页'
    },
    {
        tool: 'pageInfo'
    },
    {
        tool: 'nextPage',
        hint: '下一页'
    },
    {
        tool: 'lastPage',
        hint: '最后一页'
    },
    {
        tool: 'preview',
        hint: '预览',
        previewSliderPosition: 'right'                    
    }
]

若需要自定义工具栏，可以通过下面的接口控制页面：

添加页面

添加页面。默认添加在当前文档的最后一页。若insertAfter为K，则新添加页面位于第K个页面之后。

添加页面时，可以将一些自定义的数据，通过payload和添加的页面绑定。比如说使用互动白板在客户的动态ppt上做标注。当动态ppt切换到第N页时，可以创建页面，并设置payload: {pptPageNumber: N}。之后ppt再次切换时，可以根据getPageInfos的结果判断该页面是否创建，以及其位置。根据这些结果决定是否创建页面，以及如何跳转页面。

drawPlugin.addPage(insertAfter?: number)
drawPlugin.addPage(opt: {
    insertAfter?: number,
    payload: any
})

删除页面

删除指定页面。

drawPlugin.deletePage(index: number)

切换页面

跳转到指定页面。

drawPlugin.gotoPage(index: number)
drawPlugin.gotoPrevPage()
drawPlugin.gotoNextPage()
drawPlugin.gotoFirstPage()
drawPlugin.gotoNextPage()

页面信息

getPageInfos返回当前文档内的页面信息

/**
 *  返回结果说明
 * 
 *  //当前页面索引
 *  activeIndex: 2

 *  //文档内页面的名字（每次添加页面，新页面名字自动+1）
 *  pageNames: (4) ["0", "1", "3", "2"]

 *  //当前页面的名字
 *  currPage: 3

 *  //页面的payloads
 *  pagePayloads: (4) [undefined, undefined, undefined, undefined]
 */

drawPlugin.getPageInfos()

相关文档

相关产品

×

反馈成功

非常感谢您的反馈，我们会继续努力做得更好。
确定