日日是Oracle APEX: CKEditor5による画像アップロードを実装する(3)

2022年8月3日水曜日

CKEditor5による画像アップロードを実装する(3) - 完成

これからCKEditor5を使った画像のアップロードと、画像を含んだ文章の表示を実装します。

今回の記事で、アプリケーションは完成です。

最初に前回作成したREST APIのURLを、アプリケーションの置換文字列として参照できるようにします。

アプリケーション定義の置換を開き、置換文字列としてG_IMAGE_URL、置換値としてREST APIの完全なURLを入力します。

変更の適用をクリックします。

ページ・デザイナにてページ番号２のフォームのページを開きます。

ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に、これからいくつかの場所に現れる値を宣言しておきます。

const apexSession = apex.env.APP_ID + ',' + apex.env.APP_SESSION;
const imageUrl = "&G_IMAGE_URL.";

ページ・アイテムP2_CONTENTの詳細のJavaScript初期化コードに、以下を記述します。

JavaScript初期化コードでCKEditor5のeditingDowncastコンバーターを実装しています。この機能によりイメージURLに引数?_apex_session=セッションIDを付加し、REST APIの認証が通るようにしています。しかし、editingDowncastコンバーターが初期化されるのはページ・アイテムにデータがフェッチされた後（プロセス - 初期化フォームDocumentの実行後）になります。そのため、このままではeditingDowncastコンバーターが働きません。

CKEditor5の初期化後にデータが読み直されるよう、ページのロードのタイミングで動的アクションを作成して、ページ・アイテムP2_CONTENTにデータを再読み込みします。作成した動的アクションの識別の名前はP2_CONTENTの再ロードとします。

TRUEアクションの識別の名前はCONTENTの設定とします。アクションは値の設定です。設定のタイプの設定としてSQL Statementを選択し、SQL文に以下を記述します。

select content from rte_documents where id = :P2_ID

送信するアイテムとしてP2_IDを選択します。影響を受ける要素の選択タイプはアイテム、アイテムはP2_CONTENTを選択します。実行の初期化時に実行はOFFにします。

以上でページのロード時に、ページ・アイテムP2_CONTENTの内容が再度読み込まれます。

P2_CONTENTとしてアップロードされたデータに含まれている画像URLを見つけて、その画像と表CKE_DOCUMENTSの行を紐付けます。表CKE_IMAGESの列DOCUMENT_IDに、その画像を含んでいるドキュメントのIDを設定します。

CKEditorを使ってアップロードされた画像は、他のドキュメントと共有されることはないという前提です。（手作業で画像URLを打ち込まない限りは、そのような状況は発生しない。）

画像の紐付け処理を行うため、プロセスを作成します。作成したプロセスは、ダイアログを閉じるの前に配置します。

識別の名前を画像の紐付け、タイプはコードの実行とし、以下のPL/SQLコードを記述します。

対話モード・レポートにも画像が表示されるようにします。

ページ・デザイナにてページ番号１の対話モード・レポートのページを開きます。

対話モード・レポートのソースのタイプをSQL問合せに変更し、SQL問合せとして以下を記述します。

select
    ID
    , TITLE
    -- , CONTENT
    , regexp_replace(
        content
        , :G_IMAGE_URL || '/([0-9]+)'
        , :G_IMAGE_URL || '/\1?_apex_session=' || :APP_ID || ',' || :APP_SESSION
    ) content
    , AUTHOR
    , PUBLISHED
    , CREATED
    , CREATED_BY
    , UPDATED
    , UPDATED_BY
from RTE_DOCUMENTS