Addons 简介

uix-addons
    ├── aria                    ----- 让内建组件支持 ARIA 标准
    ├── edit-graphics           ----- 页面对象编辑功能， 引用 text-object 或者 path-object 时会自动引用该 Addon, 不需要手动引入
    ├── export-form             ----- 导出表单功能
    ├── file-property           ----- 用于显示文档信息
    ├── form-designer           ----- 提供表单编辑功能
    ├── form-to-sheet           ----- 提供将表单附加到csv文件的功能
    ├── full-screen             ----- 全屏功能
    ├── h-continuous            ----- 水平连续页模式
    ├── h-facing                ----- 水平对开模式
    ├── h-single                ----- 水平单页模式
    ├── import-form             ----- 提供导入表单功能
    ├── javascript-form         ----- 提供添加、修改以及测试文档中的脚本。
    ├── manage-comments         ----- 提供了控制左侧注释面板中的注释列表的功能
    ├── multi-media             ----- 提供了添加音视频注释功能
    ├── page-template           ----- 提供了添加、编辑页面模板功能
    ├── password-protect        ----- 提供密码保护功能
    ├── path-objects            ----- 提供添加路径对象功能
    ├── print                   ----- 提供打印PDF页面功能
    ├── range-input             ----- 提供一个可限定方位页面输入框组件
    ├── read-aloud              ----- 提供朗读PDF文本内容功能
    ├── recognition-form        ----- 提供表单域识别功能
    ├── redaction               ----- 提供标记密文功能
    ├── search                  ----- 文本搜索功能
    ├── text-object             ----- 编辑页面文本对象功能
    ├── thumbnail               ----- 提供缩略图功能
    ├── undo-redo               ----- 提供撤销、重做功能
    ├── xfa-form                ----- 提供编辑静态XFA表单功能 
    ├── allInOne.js             ----- 包含以上所有的Addon
    └── allInOne.mobile.js      ----- 包含以上只支持mobile的Addon

Addon 依赖结构

为了避免不同的 Addon 中相同的功能重复注册和执行，有些相同功能会被提取到单独的 addon 中， 然后以依赖的形式加载。

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。此外，您可以使用我们的 合并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(UIExtension).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(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来合并所选的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。