# # Addons 简介

在 /lib/uix-addons 目录，Foxit PDF SDK for Web 提供了丰富的、可自由组合的 addons。以下列出了当前支持的 addons。每个 addon 都可以单独加载或者根据需要组合加载。

    uix-addons
        ├── aria                    ----- 使组件支持 ARIA 标准
        ├── comparison              ----- 对比 PDF 文档
        ├── edit-graphics           ----- 编辑页面对象
        ├── export-form             ----- 导出表单功能
        ├── file-property           ----- 显示文档信息
        ├── form-designer           ----- 表单编辑功能
        ├── form-to-sheet           ----- 表单转换成工作表的功能
        ├── full-screen             ----- 全屏功能
        ├── h-continuous            ----- 水平连续页模式
        ├── h-facing                ----- 水平对开模式
        ├── h-single                ----- 水平单页模式
        ├── import-form             ----- 导入表单功能
        ├── javascript-form         ----- 添加、修改和测试文档中的 JavaScript
        ├── manage-comments         ----- 控制注释列表功能
        ├── multi-media             ----- 添加音频和视频注释功能
        ├── page-template           ----- 编辑页面模板功能
        ├── password-protect        ----- 密码保护
        ├── path-objects            ----- 编辑 path 页面对象
        ├── preview                 ----- 支持输出预览功能
        ├── print                   ----- 打印 PDF 页面功能
        ├── range-input             ----- range-input 组件
        ├── read-aloud              ----- 朗读UI组件
        ├── recognition-form        ----- 表单域识别功能
        ├── redaction               ----- 密文功能
        ├── rotate-pages            ----- 旋转页面功能
        ├── search                  ----- 文本搜索功能
        ├── text-object             ----- 编辑文本对象功能
        ├── thumbnail               ----- 缩略图侧边栏功能
        ├── undo-redo               ----- undo-redo 功能
        ├── xfa-form                ----- 编辑静态XFA表单功能
        ├── dynamic-xfa             ----- 编辑动态XFA表单功能
        ├── allInOne.js             ----- 包含以上所有的 Addon
        └── allInOne.mobile.js      ----- 包含以上只支持 mobile 的 Addon

## # Addon 依赖结构

为了避免重复注册和执行在不同 addons 中的相同函数，这些函数被提取到单独的 addons 中，然后作为依赖项被动加载。

    edit-graphics
        ├── path-objects
        └── text-object

当应用程序加载 `path-objects` 或者 `text-object` 时，`edit-graphics` 也会被加载，并且只会被加载一次。

## # 加载 Addons

### # 单独加载 addons

您可以加载所有可用的 addons，或者只加载特定的 addons。

示例代码:

    <script src="path/to/UIExtension.full.js"></script>
    <script>
        var pdfui = new UIExtension.PDFUI({...
        addons:[
            "path/to/customized-addon/addon.info.json",
            "path/to/lib/multi-media/addon.info.json",
            ...
        ],
        ...
        })
    </script>

`/examples/UIExtension/complete_webViewer/index.html` 文件提供了如何单独加载所有 addons 的示例。

### # 组合加载 addons

在网络环境中，下载太多的 addons 会增加 HTTP 请求。为了最大限度地减少 HTTP 请求数量，您可能希望在单个文件中加载所有加载项。Foxit PDF SDK for Web 提供了组合所有 addons 的脚本文件 `allInOne.js` (PC端) 和 `allInOne.mobile.js` (mobile端) 。此外，您可以使用我们的 合并 addons 工具 来定制 addons。

## # addon 结构

### # 入口文件 -- addon.info.json

`addon.info.json` 是 addon 的入口文件，其包含 addon 的库名称，i18n 资源以及 css 文件。

示例:

    {
        "library": "ExampleUIXAddon",
        "i18n": {
            "ns": "example",
            "sources": {
                "en-US": "./locales/en-US.json",
                "zh-CN": "./locales/zh-CN.json"
            }
        },
        "css": [
            "./index.css"
        ]
    }

### # "i18n" 资源

该条目用来配置本地化。"ns" 指定命名空间。"sources" 指定文件。

完成配置后，您可以使用 `[i18n-namespace]: i18n-key` 来实现本地化。

在以下的示例中，i18n 命名空间是 "example"，"i18n-key" 可以是 "toolbar.title", "dialog.title" 或者 "buttons.addText" (有关更详细介绍，请参考 zh-CN.json)。

    <h6>example:dialog.title</h6>

被翻译为

    <h6>Dialog title</h6>

和

    <h6>对话框标题 Dialog title</h6>

### # "css" 域

该条目指定样式表 ("index.css" 是样式加载器的输出)。目前只支持 CSS。

## # allInOne.js 和 allInOne.mobile.js

`allInOne.js` 是一个脚本文件，其包含了当前 PC 端支持的所有 addons，`allInOne.mobile.js` 则包含了 mobile 端支持的所有 addons。通过该脚本文件，您可以以组合的方式加载 addons。`allInOne.js` 和 `allInOne.mobile.js` 的区别在于 mobile 端不支持`form-designer` 和 `text-object` addon。

### # 加载 allInOne.js 和 allInOne.mobile.js

    <script src="path/to/UIExtension.full.js"></script>
    <script src="path/to/allInOne.js"></script>
    <script src="path/to/allInOne.mobile.js"></script>
    <script>
        var pdfui = new UIExtension.PDFUI({...
        addons:UIXAddons, // UIXAddons is the library name in allInOne.js
        ...
        })
    </script>

### # 加载自定义 addInOne.js 和 allInOne.mobile.js

默认的 `allInOne.js` (PC端) 和 `allInOne.mobile.js` (mobile端) 将当前支持的所有 addons 合并到单个脚本文件中。您可以通过 `UIXAddons(UIExtension).filter` 分离不需要的 addon，然后将其加载到 web viewer 中。

比如：

    <script src="path/to/UIExtension.full.js"></script>
    <script src="path/to/allInOne.js"></script>
    <script>
        UIXAddons = UIXAddons(UIExtension).filter(addon=>addon.getName()!= 'editTextObject')
        var pdfui = new UIExtension.PDFUI({...
        addons:UIXAddons,
        ...
        })
    </script>

## # 合并 addons

如果您想要自己合并 addons 或者重新编译 `allInOne.js` 或者 `allInOne.mobile.js` 来合并所选的 addons，您可以使用我们的合并 addon 工具 `addon loader` 和 `gulp plugin`。有关更详细说明，请查阅以下的链接。

- addon-loader for webpack
  (opens new window)
- addon merge tool for gulp
  (opens new window)

您也可以参阅 `/examples/UIExtension/use-merged-addon` 的使用方法。

## # 开发自定义 addons

/examples/UIExtension/scaffoldDemo/ 是一个 scaffold 工程，其包含了一个开源 addon 示例。您可以参阅 /examples/UIExtension/scaffoldDemo/readme.md 文件来开始开发自定义的 addons。