# 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-objectform-designer

有两种方法来编译自定义addons:

# 加载 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 loadergulp plugin。有关更详细说明,请查阅以下的链接。

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

# 开发自定义 addons

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