# Addons 简介
在 /lib/uix-addons 目录,Foxit PDF SDK for Web提供了丰富的、可自由组合的addons。以下列出了当前支持的addons。每个addon都可以单独加载或者根据需要组合加载。
uix-addons
├─edit-graphics ----- 编辑页面对象
├─text-object ----- 编辑文本对象
├─export-form ----- 导出菜单
├─file-property ----- 文档信息
├─full-screen ----- 全屏功能
├─h-continuous ----- 水平连续页面布局
├─h-facing ----- 水平封面页面布局
├─h-single ----- 水平单页页面布局
├─import-form ----- 导入表单
├─multi-media ----- 多媒体注释
├─password-protect ----- 密码保护
├─path-objects ----- 编辑path页面对象
├─print ----- 打印
├─redaction ----- 密文功能
├─undo-redo ----- undo-redo 功能
└─allInOne.js ----- 以上addons合集
以下列出了所有可用的addons,每个addon都可以通过静态方法 getName() 来标识。
'edit-graphics'
'exportForm'
'file-property'
'full-screen'
'h-continuous'
'h-facing'
'h-single'
'importForm'
'multi-media'
'password-protect'
'edit-pageobjects'
'print'
'redaction'
'editTextObject'
'undo-redo'
# 加载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。此外,您可以使用我们的 合并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.js 是一个脚本文件,其包含了当前支持的所有addons。通过allInOne.js,您可以以组合的方式加载addons。allInOne.js文件只适用于PC端。如果您希望其可以用于移动端,则需要重新编译该文件,以移除在移动端不可用的功能 text-object和form-designer。
有两种方法来编译自定义addons:
- 使用 合并addons工具 合并所需的addons,然后输出一个新的all-in-one addons文件。
- 使用
UIXAddons.filter动态地从allInOne.js中分离addons,并加载。请查阅 加载自定义addInOne.js .
# 加载 allInOne.js
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
var pdfui = new UIExtension.PDFUI({...
addons:UIXAddons, // UIXAddons is the library name in allInOne.js
...
})
</script>
# 加载自定义addInOne.js
默认的 allInOne.js 将当前支持的所有addons合并到单个脚本文件中。您可以通过UIXAddons.filter分离不需要的addon,然后将其加载到web viewer中。
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
UIXAddons = UIXAddons.filter(addon=>addon.getName()!= 'editTextObject')
var pdfui = new UIExtension.PDFUI({...
addons:UIXAddons,
...
})
</script>
# 合并 addons
如果您想要自己合并addons或者重新编译 allInOne.js来合并所选的addons,您可以使用我们的合并addon工具 addon loader 和 gulp plugin。有关更详细说明,请查阅以下的链接。
您也可以参阅 /examples/UIExtension/use-merged-addon 的使用方法。
# 开发自定义 addons
/examples/UIExtension/scaffoldDemo/ 是一个scaffold工程,其包含了一个开源addon示例。您可以参阅 /examples/UIExtension/scaffoldDemo/readme.md 文件来开始开发自定义的addons。