# 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。有关更详细说明，请查阅以下的链接。
您也可以参阅 /examples/UIExtension/use-merged-addon 的使用方法。
# 开发自定义 addons
/examples/UIExtension/scaffoldDemo/ 是一个 scaffold 工程，其包含了一个开源 addon 示例。您可以参阅 /examples/UIExtension/scaffoldDemo/readme.md 文件来开始开发自定义的 addons。