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

2022年8月2日火曜日

CKEditor5による画像アップロードを実装する(1) - 準備

Louis MoreauxさんがCKEditor5の画像アップロードを行う方法を、CKEditor5 Image Uploadという記事にしていました。Oracle APEX 22.1から使用できます。この機能を使って、画像を含んだ文書の編集を行うアプリケーションを作成してみます。

Oracle APEX 23.1より、リッチ・テキスト・エディタはCKEditor5からTinyMCEに置き換えられています。本記事ではCKEditor5を使った画像アップロードを実装します。

作成するアプリケーションは、以下のような動作になります。機能の実装を目的としていて、細かいユーザー・インターフェースの調整などは省略しています。

元記事の説明は、根幹となる機能の実装方法に限られています。そのため、元記事だけで完全なアプリケーションを作るのは難しいです。できるだけ、手順を追えば同じアプリケーションを作成できるように説明します。

文書と画像を保存する表を作成する

文書を保存する表RTE_DOCUMENTSと画像を保存する表RTE_IMAGESを作成します。表の作成にはクイックSQLの以下のモデルを使います。

# prefix: rte
# pk: guid
documents /auditcols
    title    vc200
    content  clob
    author   vc80
    published date
    
images
    document_id /fk documents
    content_type vc200
    image blob
    created date /nn
    created_by vc255 /nn

SQLワークショップのユーティリティのクイックSQLを開きます。左側に上記のモデルを記述し、SQLの生成、SQLスクリプトを保存、レビューおよび実行を順番に実施します。

SQLスクリプトのレビュー画面が開きます。

クイックSQLの不具合だと思われますが、監査列の生成を指定していないにも関わらず、列にCREATED、CREATED_BYが含まれていると、対応したトリガーを作成するCREATE TRIGGER文が生成されます。このトリガーrte_images_biuは不要なので、create trigger文を削除します。

[2024年10月9日追記]

APEX 24.1.5で確認したところ、クイックSQLでトリガーrte_images_biuは作成しなくなりましたが、表rte_imagesの列created_byの型がdateになってしまいます。DDLを実行する前にvarchar2(255 char)に変更する必要があります。

SQLスクリプトの修正後、実行をクリックします。

確認画面が開きます。即時実行をクリックします。

4行の実行が成功し、エラーがなければ表RTE_DOCUMENTSとRTE_IMAGESが問題なく作成されています。

表の作成は以上で完了です。

基本的なアプリケーションを作成する

作成した表RTE_DOCUMENTS、RTE_IMAGESの基本的な操作を行うアプリケーションを作成します。Oracle APEXのアプリケーション作成ウィザードを実行します。

アプリケーションの名前を画像付き文書とします。ホームの編集をクリックして開き、削除します。

ホーム・ページの編集画面です。削除をクリックします。確認のダイアログが表示されるので、OKをクリックします。

表RTE_DOCUMENTSを一覧するレポートのページと、編集を行うフォームのページを作成します。ページの追加をクリックします。

対話モード・レポートを選択します。

対話モード・レポートのページ名は画像付き文書とします。表またはビュー、対話モード・レポートを選択します。

表またはビューとしてRTE_DOCUMENTSを選択し、フォームを含めるにチェックを入れます。詳細のホームページとして設定にチェックが入っていることを確認します。

以上で、ページの追加をクリックします。

表RTE_IMAGESのメンテナンスを行う画面を追加します。エンド・ユーザーがこの画面を使用する予定はありません。

先ほどと同様に、ページの追加をクリックします。

追加ページを開いて、複数のレポートを選択します。

表名の一覧より、RTE_IMAGESのみにチェックをいれます。ページの追加をクリックします。

追加されたページImagesの編集をクリックします。

詳細を開き、管理ページとして設定にチェックを入れます。以上で、変更の保存をクリックします。

ページImagesのアイコンがスパナに変わります。

以上のページ構成で、アプリケーションの作成を実行します。

アプリケーションが作成されます。これから色々な機能を実装するページは、ページ番号１の画像付き文書と、２のDocumentです。

アプリケーションを調整する

監査列のコメント・アウトと、フォームに含まれるページ・アイテムのレイアウトを調整します。

ページ番号１の対話モード・レポートのページを開き、列CREATED、CREATED_BY、UPDATED、UPDATED_BYを選択します。その後にプロパティ・エディタの構成のビルド・オプションとしてコメント・アウトを選択し、保存を実行します。

続いてページ番号２のフォームのページを開き、ページ・アイテムP2_CREATED、P2_CREATED_BY、P2_UPDATED、P2_UPDATED_BYを選択し、構成のビルド・オプションでコメント・アウトを選択します。

ページ・アイテムP2_TITLEのタイプがテキスト・フィールドであることを確認します。異なる場合はテキスト・フィールドに変更します。

ページ・アイテムP2_CONTENTの位置を、P2_PUBLISHEDの下に移動します。

ページ・アイテムP2_CONTENTの識別のタイプをリッチ・テキスト・エディタに変更します。APEX 23.1よりリッチ・テキスト・エディタの実装としてTinyMCEが採用されていますが、今回は設定のライブラリとしてCKEditor [Deprecated]を選択します。

設定の書式にMarkdownを選択します。HTMLも選択できますが（Louis Moreauxさんの記事はHTMLを使っています）、クロスサイト・スクリプティングの影響を軽減するためにMarkdownを選んでいます。最小高はデフォルトの180ピクセルから変更しません。