リッチ・テキスト・エディタの設定の書式にHTML、ツールバーに完全を選択すると、フォント・ファミリを選択できるようになります。
上記の設定を行ったページ・アイテムでは、以下のようにフォント・ファミリの選択ができます。
追加したフォント・ファミリの確認がしやすいように、Google Fontsに含まれるPacificoを追加してみます。カテゴリのCuteに含まれるPacificoを選択します。
Get fontをクリックします。
Get embed codeをクリックします。
Embed code in the <head> of your htmlのコードを、Copy codeをクリックしてクリップ・ボードにコピーします。
リッチ・テキスト・エディタにフォント・ファミリを追加するために、詳細の初期化JavaScriptファンクションに以下を記述します。
APEXのページ・デザイナに戻ります。
ページ・プロパティのHTMLヘッダーにコピーしたコードをペーストするか、または、CSSのファイルURLにlink href=で指定されているURLを記述します。
Pacificoフォントのlink href=で指定されているURLは以下です。
https://fonts.googleapis.com/css2?family=Pacifico&display=swap
この設定で、表示されるHTMLのページにPacificoフォントが読み込まれます。
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://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のアプリケーション作成の参考になれば幸いです。
完