Oracle APEXではページ・アイテムにCKEditor5のClassic editorを組み込むことにより、リッチ・テキスト・エディタを実現しているようです。今回の次記事はCKEditor5のInline editorをリージョンに紐づけてみます。
https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html
作成したアプリケーションは以下のように動作します。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はInline Editorとします。
ページ・デザイナでホーム・ページを開きます。
CKEditor5のInline editorのInstallation exampleを、Oracle APEXに合わせて変更をして上で、ページに実装します。
Inline editorのビルドをページ・ロード時にインポートします。ページ・プロパティのJavaScriptのファイルURLに以下を記述します。
https://cdn.ckeditor.com/ckeditor5/35.0.1/inline/ckeditor.js
Bodyにリージョンを作成します。
識別のタイトルはInline Editor、タイプは静的コンテンツとします。外観のテンプレートとして、装飾が少ないBlack with Attributes (No Grid)を選択します。詳細の静的IDにeditorを設定します。
作成したリージョンにInline editorを作成します。
ページ・プロパティのJavaScriptのページ・ロード時に実行に、以下を記述します。
// Inline editorを生成する。
InlineEditor
.create( document.querySelector( '#editor' ) )
.then ( editor => {
inlineEditor = editor;
console.log(editor);
})
.catch( error => {
console.error( error );
} );
この状態でページを実行してみます。
ページ上にInline editorが組み込まれ、文字の入力ができることが確認できます。
表を作るのは手間なので、APEXコレクションのCLOB列に書き込みます。
ページ・アイテムP1_IDを作成します。タイプとして非表示を選択します。ソースのセッション・ステートの保持はセッションごと(ディスク)を選択します。
このページ・アイテムには、APEXコレクションに保存されたデータの位置を示すシーケンスIDを保存します。
レンダリング前のヘッダーの前に、APEXコレクションを初期化するプロセスを作成します。
識別の名前をコレクションの初期化、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。
APEXコレクションINLINE_EDITORを初期化し、あらかじめメンバーを追加しておきます。Inline editorの内容は、この追加したメンバーを対象として取得と保存を行います。
apex_collection.create_or_truncate_collection(
p_collection_name => 'INLINE_EDITOR'
);
:P1_ID := apex_collection.add_member(
p_collection_name => 'INLINE_EDITOR'
);ページ・アイテムP1_IDに値が設定されていないときに限り初期化されるように、サーバー側の条件として、タイプにアイテムはNULL、アイテムとしてP1_IDを指定します。
APEXコレクションとInline editorのデータのやり取りは、Ajaxコールバックとして実装します。
APEXコレクションからデータを取り出すAjaxコールバックを作成します。
識別の名前はGET_DOCUMENT、タイプとしてコードを実行を選択します。ソースのPL/SQLコードとして以下を記述します。
declare
l_clob clob;
begin
select clob001 into l_clob from apex_collections
where collection_name = 'INLINE_EDITOR' and seq_id = :P1_ID;
htp.p(l_clob);
end;
同様の手順にてデータを保存するAjaxコールバックを作成します。識別の名前はSTORE_DOCUMENT、PL/SQLコードは以下になります。
begin
apex_collection.update_member_attribute (
p_collection_name => 'INLINE_EDITOR'
, p_seq => :P1_ID
, p_clob_number => 1
, p_clob_value => apex_application.g_x01
);
end;
Ajaxコールバックを呼び出すコードを、ページ・プロパティのJavaScriptのページ・ロード時に実行に追記します。
Inline editorに入力した内容を保存するアクションstore_documentを呼び出すボタンを作成します。なお、Inline editorへのデータの取得は、ページ・ロード時に実行するためボタンは作りません。
ブラッドクラム・リージョンにボタンを作成します。
識別のボタン名はB_STORE_DOCUMENT、ラベルは保存とします。レイアウトの位置としてNextを選択します。動作のアクションとして動的アクションで定義を選択し、詳細のカスタム属性としてdata-action="#action$store_document"を記述します。
以上で実装は完了です。画像などはHTML自体には含まれないため、こちらの記事のように実装する必要があります。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/ckeditor5-inline-editor.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
