2022年8月29日月曜日

CKEditor5のInline editorを使ってみる

 Oracle APEXではページ・アイテムにCKEditor5のClassic editorを組み込むことにより、リッチ・テキスト・エディタを実現しているようです。今回の次記事はCKEditor5のInline editorをリージョンに紐づけてみます。

https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html

作成したアプリケーションは以下のように動作します。


アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はInline Editorとします。


作成されたアプリケーションのホーム・ページに、リージョンとして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が組み込まれ、文字の入力ができることが確認できます。


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を生成する。
InlineEditor
.create( document.querySelector( '#editor' ) )
.then ( editor => {
inlineEditor = editor;
console.log(editor);
})
.catch( error => {
console.error( error );
} );
// Inline editorへのデータの取得。
apex.server.process (
"GET_DOCUMENT",
{
x01: "test",
pageItems: "#P1_ID"
},
{
dataType: "text",
success: function( pData ) {
// Inline editorへデータを設定する。
inlineEditor.data.set(pData);
}
}
);
//
apex.actions.add([
{
name: "store_document",
action: function ( event, element, args ) {
apex.server.process(
"STORE_DOCUMENT",
{
x01: inlineEditor.data.get(),
pageItems: "#P1_ID"
},
{
dataType: 'text',
success: function (data) {
// 特に何もしない。
},
error: function( jqXHR, textStatus, errorThrown ) {
// エラー処理を記述する。
}
}
);
}
}
]);
view raw inline-editor.js hosted with ❤ by GitHub


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のアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: