Foxit PDF SDK For Web - V10.0.0

# Edit 模块对比

在 10.0 版本之前，Foxit PDF SDK for Web 提供了三种类型的发布包：无字体标准包 (Light package)、包含字体的标准版 (Standard package)，以及包含字体和一些高级功能的完整包 (Full package)。Light/Standard package 使用相同的 Edit 模块，Full package 使用高级的 Edit 模块。为了区分这两个模块，Light/Standard package 中的 Edit 模块将命名为 Std Edit，Full package 中的 Edit 模块将命名为 Adv Edit。

从 10.0 版本开始，Foxit PDF SDK for Web 仅提供了一个完整包。

Full package 默认使用 Adv Edit，同时也包含 Std Edit 模块，用户可以根据需要自行切换。Adv Edit 模块在整体交互上会更具有优势，但需要 license 权限，否则将无法使用。

Std Edit 模块主要功能：基于 PDF 内容对象的编辑，即文本对象，图片对象和 shape 对象。可新增 PDF 内容对象，以及修改文本对象的字体样式 (字体、字体大小和颜色)。

Adv Edit 模块主要功能：不仅支持 Edit 模块基于 PDF 内容对象编辑，还支持文本块编辑。在Std Edit 模块功能基础上，新增更多功能。

  1. 文本块编辑：

    • 字体样式、对齐方式、项目符号、行/字间距、字符比例等样式
    • 加入和拆分

  2. 搜索和替换文本

  3. shape对象：

    • 预设更多可创建的path对象
    • 创建shading对象
    • 编辑shape对象更多属性

以下是两个模块的对比。

# UI 对比

Std Edit 的 Edit 选项卡下的功能区:

ribbon of Edit

Adv Edit 的 Edit 选项卡下的功能区:

ribbon of Adv Edit

Adv Edit 的右侧面板功能区：

ribbon of the right panel of Adv Edit

Adv Edit 不仅包含 Std Edit 模块的所有功能，还支持更丰富的功能。例如：文本的样式、层级、转换、段落相关功能、以及 shape 样式等等。

# 功能对比

功能 Std Edit Adv Edit
License 权限 Standard 需要 Adv Edit 模块权限
组件& 功能
1. <edit-pageobjects:edit-all-objects-button>: 用于编辑 PDF 页面中当前支持的页面对象。
2. <add-image-ribbon-button>: 用于在 PDF 页面中添加图片对象。
3. <edit-text-object:add-text-ribbon-button>: 用于在 PDF 页面中添加文本对象。
4. <edit-pageobjects:path-objects-ribbon-dropdown>: 用于创建不同类型的路径对象，包括 Line Path，Rectangle Path，Circle Path，RoundRect Path。
5. <edit-text-object:text-bold-style-ribbon-button>: 用于将当前编辑的文本对象切换为粗体样式。依赖 <edit-text-object:add-text-ribbon-button> 组件。
6. <edit-text-object:text-italic-style-ribbon-button>: 用于将当前编辑的文本对象切换为斜体/正常样式。依赖 <edit-text-object:add-text-ribbon-button> 组件。
7. <edit-text-object:font-color-picker>: 用于设置当前编辑的文本对象的文本颜色。依赖 <edit-text-object:add-text-ribbon-button> 组件。
8. <edit-text-object:font-style-dropdown>: 用于设置当前编辑的文本对象的字体样式和大小。依赖 <edit-text-object:add-text-ribbon-button> 组件。
1. <page-editor:edit-text>: 用于编辑PDF页面中的文本对象。依赖 <sidebar-right> 组件，支持设置 Font 和 Paragraph。
2. <page-editor:edit-object-ribbon-dropdown>: 用于编辑不同类型的页面对象，包括Text，Image，Shape 和Shading，依赖 <sidebar-right> 组件。
  • Text 对象支持设置 Font，Paragraph，Split，Effect 和 Arrange。
  • Image 对象支持设置 Effect 和 Arrange。
  • Shape 对象支持设置 Shape Style，Effect 和 Arrange。
  • Shading 对象支持设置 Shading Style，Effect 和 Arrange。
3. <page-editor:join-split>: 用于将 PDF 页面中的文本对象进行合并或拆分。
4. <find-replace:find-replace-button>: 用于查找或替换 PDF 页面中的文本对象。
5. <page-editor:add-text-button>: 用于在PDF页面中添加文本对象。依赖 <sidebar-right> 组件。支持设置 Font和 Paragraph。
6. <page-editor:add-image-button>: 用于在 PDF 页面中添加图片对象。
7. <page-editor:add-shapes-ribbon-dropdown>: 用于在 PDF 页面中添加不同类型的形状对象，包括 Line/Rectangle/RoundRect/Ellipse/Polyline/Polygon/Polybezier/Curve Path, 和 Rectangle/RoundRect/Ellipse/Polyline/PolygonPolybezier/Curve Shading。
Undo/Redo Feature 只有 AddText 支持 undo/redo 功能.
  • 由于其使用浏览器的 undo/redo 功能，所以在撤销或重做时，请确保光标位于字段中。		 advanced editor 利用内置插件管理器来管理 undo/redo 功能。负责的插件是 UIExtension > addons > UndoRedoAddon。
Addon path-objects
text-object		 Advanced_edit:
  Page_Editor
  find-replace
  PageEditorAddon
Class PDF > GraphicsObject
PDF > PathObject
PDF > TextObject		 N/A

# 如何将 Full package 默认的 Adv Edit 模块切换为 Std Edit 模块

对于 Full package，其默认使用 Adv Edit 模块，如果您没有 Adv Edit 模块的授权，并想启用 Std Edit 模块，您可以参阅以下两种方法。

方法 1: 初始化 PDFUI 对象时通过 fragments 参数修改需要显示的 Edit 模块

fragments: [
        {
            target: 'adv-edit-tab-group-mode',
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
            template:`
            <group name="edit-tab-group-mode" retain-count="3">
                        <edit-pageobjects:edit-all-objects-button @async></edit-pageobjects:edit-all-objects-button>
                        <add-image-ribbon-button></add-image-ribbon-button>
                        <edit-text-object:add-text-ribbon-button  @async></edit-text-object:add-text-ribbon-button>
                        <edit-pageobjects:path-objects-ribbon-dropdown @async></edit-pageobjects:path-objects-ribbon-dropdown>
                    </group>
            `
        },
        {
            target: 'edit-tab-group-editor',
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
            template:`
            <group name="edit-tab-group-font" retain-count="5" @require-modules="edit-text-object">
                        <edit-text-object:text-bold-style-ribbon-button></edit-text-object:text-bold-style-ribbon-button>
                        <edit-text-object:text-italic-style-ribbon-button></edit-text-object:text-italic-style-ribbon-button>
                        <edit-text-object:font-color-picker></edit-text-object:font-color-picker>
                        <edit-text-object:font-style-dropdown></edit-text-object:font-style-dropdown>
                    </group>
            `
        }
    ]

有关 fragments 参数更详细的信息，请参阅 https://webviewer-demo.foxitsoftware.com/docs/developer-guide/ui-extension/basics/fragments.html (opens new window)。

方法 2: 通过 Component 对象接口切换 Edit 模块

// 获取 Adv Edit 模块的编辑功能的 advEditTabGroupMode 组件
var advEditTabGroupMode = await pdfui.getComponentByName("adv-edit-tab-group-mode");
// 移除刚获取的 advEditTabGroupMode 组件
advEditTabGroupMode.remove();
// 获取 Adv Edit 模块的编辑功能的 advEditTabGroupEditor 组件
var advEditTabGroupEditor = await pdfui.getComponentByName("edit-tab-group-editor");
// 移除刚获取的 advEditTabGroupEditor 组件
advEditTabGroupEditor.remove();
// 获取 Edit 选项卡下第一个包含 hand 功能的 editTabGroupHand 组件
var editTabGroupHand = await pdfui.getComponentByName("edit-tab-group-hand");
// 在 editTabGroupHand 组件后插入目标 Edit 模块
editTabGroupHand.after(`
          <group name="edit-tab-group-font" retain-count="5"> //group component
                      <edit-text-object:text-bold-style-ribbon-button></edit-text-object:text-bold-style-ribbon-button> //text-object Bold component
                       <edit-text-object:text-italic-style-ribbon-button></edit-text-object:text-italic-style-ribbon-button> //text-object Italic components
                       <edit-text-object:font-color-picker></edit-text-object:font-color-picker> //text object Color component
                       <edit-text-object:font-style-dropdown></edit-text-object:font-style-dropdown> //text object Font Name and Size components
           </group>
`)
editTabGroupHand.after(`
           <group name="edit-tab-group-mode" retain-count="3"> //group component
                       <edit-pageobjects:edit-all-objects-button @async></edit-pageobjects:edit-all-objects-button> //The component of editing graphicobjects
                       <add-image-ribbon-button></add-image-ribbon-button>//The component of adding image graphic object
                       <edit-text-object:add-text-ribbon-button @async></edit-text-object:add-text-ribbon-button> //The component of adding text graphic object
                       <edit-pageobjects:path-objects-ribbon-dropdown @async></edit-pageobjects:path-objects-ribbon-dropdown> //The component of adding path graphic object
           </group>
`)

← AnnotationAuthorityManager →