# 如何使用addons中的controller

# 1. API预览

WEBSDK的controller都可以在API Reference文档的Modules > UIExtension > controllers栏目中找到,其中,定义在addons中的controller都汇总在Modules > UIExtension > controllers > UIXAddon栏目下
API Reference文档地址:/docs/API_Reference/html/group__controllers.html (opens new window)

# 2. controller的使用

# 2.1 在模板中使用

我们用page-editor:AddTextController来举例,来说明如何在模板中使用controller

# a. 在初始化的时候使用

new PDFUI({
    fragments: [{
        // 要操作的目标组件名
        target: 'some-component-name',
        // 操作的类型,这里是替换
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        // 模板,这里使用`@require-modules`指令来处理懒加载操作
        template: `<ribbon-button @controller="page-editor:AddTextController" @require-modules="page-editor"></ribbon-button>`,
    }]
});

或者

new PDFUI({
    fragments: [{
        // 要操作的目标组件名
        target: 'some-component-name',
        // 操作的类型,这里是替换
        action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
        // 模板,这里使用`@async`指令来处理懒加载操作
        template: `<ribbon-button @controller="page-editor:AddTextController" @async></ribbon-button>`,
    }]
});

# b. 在初始化之后使用

// 初始化之后,使用`Component.after`方法在组件后面添加组件
var someComponent = await pdfui.getComponentByName('some-component-name');
someComponent.after(`<ribbon-button @controller="page-editor:AddTextController"></ribbon-button>`);

# 2.2 在配置中使用

我们用AddImageController来举例,来说明如何用配置的方式来使用controller

new PDFUI({
    fragments: [{
        // 要操作的目标组件名,需要在模板中提前定义
        target: 'some-component-name',
        config: {
            // 指定controller
            callback: UIExtension.controllers.AddImageController
        }
    }]
});

# 3. addons中的controller使用上的限制

  1. addons中的controller无法使用配置的方式来使用,只能通过模板的方式来使用。因为addon是异步加载的,在配置的时候,addons中的controller还没有加载,所以无法使用配置的方式来使用,只能通过模板的方式来使用,因为模板是在addon加载完成之后才会加载。
  2. addons中的controller无法通过UIExtension.controllers.SomeController的方式访问,因为addon是异步加载的,无法将addons中的controller暴露在UIExtension.controllers上。