2025年4月24日木曜日

リッチ・テキスト・エディタで選択できるフォントを追加する

Oracle APEXのページ・アイテムのひとつであるリッチ・テキスト・エディタでは、テキストの表示に使用するフォント・ファミリを選択できます。

リッチ・テキスト・エディタの設定書式HTMLツールバー完全を選択すると、フォント・ファミリを選択できるようになります。


上記の設定を行ったページ・アイテムでは、以下のようにフォント・ファミリの選択ができます。


このフォント・ファミリの選択肢に、新たなフォント・ファミリを追加します。

追加したフォント・ファミリの確認がしやすいように、Google Fontsに含まれるPacificoを追加してみます。カテゴリのCuteに含まれるPacificoを選択します。



Get fontをクリックします。


Get embed codeをクリックします。


Webを選択し、<link>の方を表示します。

Embed code in the <head> of your htmlのコードを、Copy codeをクリックしてクリップ・ボードにコピーします。


APEXのページ・デザイナに戻ります。

ページ・プロパティHTMLヘッダーにコピーしたコードをペーストするか、または、CSSファイルURLlink href=で指定されているURLを記述します。

Pacificoフォントのlink href=で指定されているURLは以下です。

https://fonts.googleapis.com/css2?family=Pacifico&display=swap

この設定で、表示されるHTMLのページにPacificoフォントが読み込まれます。


リッチ・テキスト・エディタにフォント・ファミリを追加するために、詳細初期化JavaScriptファンクションに以下を記述します。
function(options){
    options.editorOptions.fontFamily = {
        options: [
         	'default',
 	        'Arial, Helvetica, sans-serif',
 	        'Courier New, Courier, monospace',
 	        'Georgia, serif',
 	        'Lucida Sans Unicode, Lucida Grande, sans-serif',
 	        'Tahoma, Geneva, sans-serif',
 	        'Times New Roman, Times, serif',
 	        'Trebuchet MS, Helvetica, sans-serif',
 	        'Verdana, Geneva, sans-serif',
            'Pacifico' // Pacificoフォントを追加。
        ],
        // supportAllValues: true
    };
    return options;
}

以上の設定によりリッチ・テキスト・エディタで、新たに追加したPacificoフォントを選択できるようになります。


文字を入力すると選択したフォント・ファミリで表示されます。


今回の記事は以上になります。

Oracle Rich Text LibraryはCKEditor5をフォークしていると聞いているので、ドキュメントについてはCKEditor5のものが参考になります。Fontに関する設定は以下で説明されています。
https://ckeditor.com/docs/ckeditor5/latest/features/font.html

簡単なアプリケーションですがエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/add-font-family-to-rich-text-editor-ortl.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。