注釈エディタ

PDFビューワの注釈エディタを使用すると、PDFドキュメントの編集やレビューができます。様々な種類の注釈を追加・削除したり、新規コメントを追加し既存コメントに返信したり、テキスト、色、配置、枠線、スタイルなどの注釈プロパティを設定したりすることができます。注釈エディタのツールバーだけではなく、メインツールバーからもすべての注釈や他の様々なオプションにもアクセスできます。それは編集ツールとして提供されており、完全な編集モードに切り替えることなく簡単に編集操作を実行することができます。

次の画像に表示されている編集ツールは、クイック編集ツールバーで「元に戻す、やり直し、削除」および「墨消し」オプションとともに注釈オプションを提供します。

テキストツール

［テキストツール］ボタンをクリックすると、クイック編集ツールバーが表示され、付箋、フリーテキスト、インク注釈などのさまざまなテキスト注釈のツールが表示されます。

描画ツール

［描画ツール］ボタンを使用すると、クイック編集ツールが表示され、四角形注釈、円注釈、線注釈などのさまざまな描画注釈のツールが表示されます。

添付ファイルとスタンプ

［添付ファイルとスタンプ］ボタンを使用すると、クイック編集ツールが表示され、スタンプ注釈、添付ファイル、署名ツールなどのさまざまな添付ファイルとスタンプのツールが表示されます。スタンプ注釈を回転するには、Rotateプロパティまたは注釈に付加されている回転ハンドルを使用することができます。詳細については、「スタンプ注釈」を参照してください。

ページツール

［ページツール］ボタンを使用すると、クイック編集ツールが表示され、新しい空白のドキュメントの追加、空白のページの挿入、現在ページの削除、変更の元に戻すまたはやり直すなど、ページに関連するさまざまなオプションが表示されます。

クイック編集ツールバーの［フォームツール］ボタンには、さまざまなフォームフィールドボタンがあります。詳細については、フォームエディタを参照します。

メモ：編集ツールは、プロジェクトにSupportApiが設定されている場合（PDF文書での編集操作が可能）、自動的にメインツールバーで有効になります。

以下に示すように、secondToolbarLayoutプロパティを使用して、2番目のツールバーに表示するツールを構成することもできます。

Index.cshtml	コードのコピー
const secondToolbarLayout = viewer.secondToolbarLayout; secondToolbarLayout["text-tools"] = ['edit-text', 'edit-free-text'];

上記のサンプルコードの結果は、次のようになります。

以下に示すように、secondToolbarオプションのrenderハンドラーを使用して、2番目のツールバーをカスタマイズすることもできます。

Index.cshtml	コードのコピー
var React = viewer.getType("React"); // カスタムツールバーのコントロールを作成します var toolbarControls = [React.createElement("label", { style: { color: "white" } }, "Custom toolbar"), React.createElement("button", { className: "gc-btn gc-btn--accent", onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")]; // 2番目のカスタムツールバーを「custom-toolbar-key」キーに対して登録します viewer.options.secondToolbar = { render: function (toolbarKey) { if (toolbarKey === "custom-toolbar-key") return toolbarControls; return null; } }; // カスタム2番目のツールバーを表示します viewer.showSecondToolbar("custom-toolbar-key");

Index.cshtml

コードのコピー

var React = viewer.getType("React");
// カスタムツールバーのコントロールを作成します
var toolbarControls = [React.createElement("label", { style: { color: "white" } }, "Custom toolbar"),
React.createElement("button", { className: "gc-btn gc-btn--accent", onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")];
// 2番目のカスタムツールバーを「custom-toolbar-key」キーに対して登録します
viewer.options.secondToolbar = {
    render: function (toolbarKey) {
        if (toolbarKey === "custom-toolbar-key")
            return toolbarControls;
        return null;
    }
};
// カスタム2番目のツールバーを表示します
viewer.showSecondToolbar("custom-toolbar-key");

上記のサンプルコードの結果は、次のようになります。

または、サイドパネルの注釈エディタボタンをクリックして、注釈エディタのツールバーからすべての使用可能な注釈にアクセスできます。次の画像は、テキスト注釈を含むPDFドキュメントを表示したPDFビューワの注釈エディタを示しています。

Annotation editor in GcDocs PDF Viewer

以下の表にて、注釈エディタにあるツールバーボタンを説明します。注釈の詳細情報については、「注釈の種類」を参照してください。.

名前	ツールバーアイコン	説明
注釈を選択		追加された注釈を選択します。
署名ツール		グラフィカルな署名を追加します。
付箋注釈		テキストまたは付箋を追加します。
フリーテキスト注釈		常に表示されるメモを追加します。
インク注釈		フリーハンドの落書きを描きます。
四角形注釈		四角形を追加します。
円注釈		円を追加します。
線注釈		直線を追加します。
折れ線注釈		折れ線を追加します。
多角形注釈		多角形を追加します。
スタンプ注釈		画像を追加します。
添付ファイル注釈		ファイルをドキュメントに添付します。
リッチメディア注釈		PDF にメディアリソースを追加します。
音声注釈		音声（.au／.aiff／.wav 形式）を追加します。
リンク注釈		リンクを追加します。
ハイライト注釈		選択したテキストを強調表示します。
下線注釈		選択したテキストに下線を付けます。
波状下線注釈		選択したテキストに波状下線を付けます。
取り消し線注釈		選択したテキストに取り消し線を付けます。
注釈を削除		注釈を削除します。
墨消し領域としてマーク		PDFドキュメントの領域を墨消し対象としてマークします。
すべてに墨消しを適用		墨消し対象としてマークされたすべての領域に墨消しを適用します。

メモ： PDFビューワでは、上記のすべての注釈がサポートされています。以下の注釈の詳細については、リンク先の別トピックをご参照ください。

PDFビューワは、上記の様々な種類の注釈以外にも、PDFドキュメントの操作中に使用できるいくつかの一般的な編集機能も提供しています。以下の表にて紹介します。

ツールバーアイコン	説明
	変更を元に戻します。
	変更をやり直します。
	変更したドキュメントをクライアントに保存します。
	変更したドキュメントを画像としてクライアントに保存します。
	新しい空白のドキュメントを作成します。
	空白ページを挿入します。
	ページを削除します。
	PDFドキュメント内のページを並べ替えたり、整理したりすることができます。詳細については、「ページの整理」を参照します。

また、newPageメソッドを使用して、PDFドキュメントに空白のページを挿入し、そのサイズを設定できます。または、以下のコードのように、setPageSizeメソッドを使用して既存のページのサイズのみを設定できます。

Index.cshtml	コードのコピー
viewer.open("AcmeFinancialReport.pdf"); viewer.onAfterOpen.register(()=> { // 2番目の位置に新しいページを追加し、そのサイズを設定します viewer.newPage({height:400, pageIndex:1, width:300}); // 最初のページのサイズを設定します viewer.setPageSize(0, { width: 300, height: 500 }); });

Index.cshtml

コードのコピー

viewer.open("AcmeFinancialReport.pdf");
viewer.onAfterOpen.register(()=>
    {   
      // 2番目の位置に新しいページを追加し、そのサイズを設定します
      viewer.newPage({height:400, pageIndex:1, width:300});
      // 最初のページのサイズを設定します
      viewer.setPageSize(0, { width: 300, height: 500 });
    });

［テキストを修飾］メニュー

PDFビューワのコンテキストメニューで表示される［テキストを修飾］オプションをクリックすると、［テキストを修飾］メニューが表示されます。［テキストを修飾］メニューを使用すると、デフォルトで以下の注釈を6種類の色で適用でき、選択したテキストを区別できます。

ハイライト注釈		選択したテキストを強調表示します。
下線注釈		選択したテキストに下線を付けます。
波状下線注釈		選択したテキストに波状下線を付けます。
取り消し線注釈		選択したテキストに取り消し線を付けます。

［テキストを修飾］メニューを使用して選択したテキストに注釈を適用すると、注釈に対応するコメントがコメントパネルに追加され、リスト内の新しいコメントに焦点が当てられます。このコメントを使用して、選択したテキストに関する追加情報を提供できます。詳細については、「コメントパネル」を参照してください。

以下のGIF画像は、上記の動作を示しています。

これらのテキストマークアップ注釈は、注釈エディタからだけでなく、PDF ビューワのクイック編集ツールバーのテキストツールのオプションからも使用できます。

PDFビューワでは、textMarkupContextMenu プロパティを false に設定することで、［テキストを修飾］メニューを無効にすることができます。また、これらの注釈で使用可能な色を変更することもできます。

以下のサンプルコードは、［テキストを修飾］メニューを無効にする方法を示しています。

C#	コードのコピー
// ［テキストを修飾］メニューを無効にします var viewer = new DsPdfViewer(selector, {textMarkupContextMenu: false});

以下のサンプルコードは、デフォルトの色を「赤」と「黒」に変更する方法を示しています。

C#	コードのコピー
// デフォルトのテキストマークアップの色を「赤」と「黒」に変更します var viewer = new DsPdfViewer(selector, { textMarkupContextMenu: { colors: [{value: "#ff0000", displayName: "Red"}, {value: "#000000", displayName: "Black"}] } });

コードのコピー

        
// デフォルトのテキストマークアップの色を「赤」と「黒」に変更します
var viewer = new DsPdfViewer(selector, { 
textMarkupContextMenu: { colors: [{value: "#ff0000", displayName: "Red"}, {value: "#000000", displayName: "Black"}] } });

以下のサンプルコードは、［テキストを修飾］メニューのさまざまなテキストマークアップ注釈で使用可能な色のオプションを変更する方法を示しています。

C#	コードのコピー
// ［テキストを修飾］メニューのさまざまなテキストマークアップ注釈で使用可能な色のオプションをカスタマイズします var viewer = new DsPdfViewer(selector, { textMarkupContextMenu: { colors: { highlight: [ {value: "#ff0000", displayName: "Red"}, {value: "#000000", displayName: "Black"} ], underline: [ {value: "#ff0000", displayName: "Red"} ] } } });

コードのコピー

        
// ［テキストを修飾］メニューのさまざまなテキストマークアップ注釈で使用可能な色のオプションをカスタマイズします
var viewer = new DsPdfViewer(selector, {
    textMarkupContextMenu: {
      colors: {
          highlight: [
              {value: "#ff0000", displayName: "Red"},
              {value: "#000000", displayName: "Black"}
          ],
          underline: [
              {value: "#ff0000", displayName: "Red"}
          ]
      }
    }
  });

制限事項: DioDocsのPDFビューワとAdobe Acrobat Readerでは、ハイライト注釈の外観に違いがあります。

プロパティパネル

左側の垂直パネルにある注釈エディタのアイコンをクリックすると、注釈エディタのプロパティパネルが表示されます。プロパティパネルには、ドキュメント内のすべての注釈のリストがページごとに一覧表示されます。

また、テキスト、色、枠線、配置など、ドキュメント内の任意の注釈のプロパティを設定することもできます。例えば、以下の画像は、プロパティパネルにある四角形注釈のプロパティを示しています。

Property Panel of Annotation Editor

PDFビューワで注釈エディタの有効化

PDFビューワにて、デフォルトで注釈エディタを表示するには、次のコードのようにAnnotationEditorPanelを有効にします。

Index.cshtml	コードのコピー
<script> var viewer = new DsPdfViewer("#host", { supportApi: 'SupportApi/DsPdfViewer' }); viewer.addDefaultPanels(); viewer.addAnnotationEditorPanel(); viewer.beforeUnloadConfirmation = true; viewer.open("Home/GetPdf"); </script>

Index.cshtml

コードのコピー

<script>
    var viewer = new DsPdfViewer("#host", { supportApi: 'SupportApi/DsPdfViewer' });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.open("Home/GetPdf");
</script>

PDFビューワで表示される注釈オプションをカスタマイズするには、ビューワでPDFをロードするクラスファイルに次のコードを追加します。

C#	コードのコピー
public static DsPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions { get => new DsPdfViewerSupportApiDemo.Models.PdfViewerOptions( DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.AnnotationEditorPanel \| DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.ActivateAnnotationEditor, annotationEditorTools: new string[] { "edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save" }); }

コードのコピー

public static DsPdfViewerSupportApiDemo.Models.PdfViewerOptions PdfViewerOptions
{
        get => new DsPdfViewerSupportApiDemo.Models.PdfViewerOptions(
        DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.AnnotationEditorPanel |
        DsPdfViewerSupportApiDemo.Models.PdfViewerOptions.Options.ActivateAnnotationEditor,
        annotationEditorTools: new string[] { "edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "edit-redact", "edit-redact-apply", "$split", "edit-undo", "edit-redo", "save" });
}

注釈エディタでPDFドキュメントのレビュー

以下の手順に従って、PDFビューワの注釈エディターを使用してPDFドキュメントをレビューします。

PDFドキュメントの編集ができるようPDFビューワを設定します。
アプリケーションを実行し、[開く]ボタンを使用してレビューするPDFを開きます。
左側の垂直ツールバーの最後から2番目のアイコンを使用して注釈エディタを開きます。
上部のツールバーで使用可能なさまざまな注釈から注釈を選択します。
選択した注釈を使用して、ドキュメントの修正をマークします。
プロパティパネルにて色、境界線などの注釈プロパティを設定します。
テキスト注釈を追加し、最終レビューテキストを入力します。
注釈エディタを閉じて、表示モードに戻ります。

ドキュメントに注釈が正常に追加されます。注釈エディタのプロパティパネルですべての注釈の一覧を表示することができます。 GcDocs PDF Viewer