Oracle APEX 20.2のリッチテキストエディタを詳しく見る (2020/11/30)
Oracle APEX 20.2のリッチテキストエディタを詳しく見る (2020/11/30)
https://stefandobre.com/a-closer-look-at-the-rich-text-editor-of-orclapex-20-2/
投稿者：Stefan Dobre
Oracle APEXバージョン20.2には新しいリッチ・テキスト・エディタ・ウィジェットがバンドルされています。
これは、以前はCKEditor4を利用していたのに対し、CKEditor5 JavaScriptライブラリをベースにしています。
バージョン5はライブラリの完全な書き換えであり、以前のバージョンとはAPI互換性がないため、これは見た目以上に大きな問題です。
パート1 概要
この移行は既存のアプリにとってどのような意味があるのでしょうか？
APEX インスタンスを 20.2 にアップグレードした場合、CKEditor4 は APEX 20.2 にバンドルされているため、既存のアプリには違いはありません。
ただし、Versionという新しい属性に非推奨の通知が表示されます。
この属性を変更することで、自分でv5に切り替えることができます。ただし、元に戻すことはできません。
リッチテキストエディタはデフォルトでCKEditor5をベースにしているため、新規に作成されたアイテムでは、このVersion属性は全く表示されません。
APEX 20.2では、CKEditor4をベースにした新しいアイテムを作成する方法はありません。
APEXチームは、Oracle Cloud上のOracleがメンテナンスしているAPEXインスタンスなどで自動アップグレードを行った場合にアプリが壊れないように、
1回のAPEXイテレーションに両方のバージョンをバンドルすることを選択しました。
この方法では、開発者自身が手動でバージョンを更新し、この移行によって発生する可能性のある問題をチェックし、修正する時間を確保することができます。
CKEditor5にアップグレードしないとどうなりますか？
APEX 20.2では、リッチテキストエディタの項目は以前と同じように動作します。
しかし、APEX 21.1へのアップグレードでは、手動で更新されていない項目は自動的に更新されます。
これは、ウィジェットの外観や動作を変更するためにカスタムJavaScriptコードを書いている場合、
おそらくJavaScriptエラーがポップアップし、ページが使用できなくなる可能性があることを意味します。
後で頭痛の種になる可能性があるので、今はすべてのインスタンスを手動で更新することをお勧めします。
なぜCKEditor5に移行したのですか？
CKEditor4は人気が高く、安定していて機能が豊富なWYSIWYGエディタです。しかし、見た目、アーキテクチャ、セキュリティ機構の面ではかなり時代遅れです。
CKEditor の背後にあるチームは、競争に追いつくためにはエディタを完全に再構築する必要があると判断しました
- ES6 の使用、新しいデータモーダル、新しいデザイン、よりモダンな API、より良いアクセシビリティ、より厳格なセキュリティアプローチなど。
2023年までのCKEditor4のサポートが保証されていますが、一般的にはバージョン5に移行することをお勧めします。
v4 と v5 の違いについてはこちらをご覧ください。
APEX リッチテキストエディタの項目はどのように変わったのですか？
いくつかの違いがありますが、これらに限定されるものではありません。
1) 見た目
新しいエディタは、よりモダンでフラット、シンプルなデザインを特徴としています。間違いなく歓迎すべき機能強化です。
2）互換性のあるインタラクティブなグリッド
エディタはコンテンツを保持するための iFrame 要素を必要としなくなり、DOM 内で自由に移動できるようになりました。
レポートビュー：
単列ビュー：
3）マークダウンモード
デフォルトでは、リッチテキストエディタはHTMLを入力として受け取り、同様にHTMLを出力します。
しかし、CKEditor5にはMarkdownプラグインが搭載されています。
つまり、エディタにMarkdownコンテンツを与え、WYSIWYGで編集することができ、最終的な項目の値は魔法のように再びMarkdownになります。
この機能が広く使われるとは思えませんが、それにもかかわらず素晴らしいです。
注1: Markdownルートを使用する場合、すべてが有効なMarkdownを生成するわけではないので、プログラム的にツールバーの項目をいじらなければならないかもしれません。
例えば、アンダーラインアクションはMarkdownに対応するものがなく、単に<u>uタグ</u>を生成します。
注2: APEX 20.2はCKEditor5 v21.1.0にバンドルされています。
このバージョンがリリースされてから、いくつかのアップデートが行われ、Markdownの経験を大幅に改善しました。
私はAPEX 21.1が新しい機能強化の恩恵を受けることを期待しています。
4) シンプルなツールバー
更新されたページ項目は、古い属性のいくつかが欠けていることに気づくでしょう。
ツールバーをエディタの下部に配置したり、折りたたむことができなくなりました。
さらに、ツールバーの項目は、新しい行にオーバーフローすることはなくなり、オーバーフローメニューの中に隠されます。
これは実はモバイルユーザーには嬉しいことです。
5) Gone is View Source
CKEditor5はCKEditor4と同じ機能をすべて提供しているわけではありません。
よく指摘される不足している機能の一つは、HTMLソースを直接表示して編集する機能です。
ソースの表示/編集モードはv5の新しいセキュリティアプローチと、新しいデータモデルに反することになります。
例えば、エディタの入力にエディタのプラグインが解釈できない要素や属性が含まれている場合、それは無視されます。
これはv4とv5の動作方法の大きな違いです。
詳細については、こちらの Twitter スレッドと GitHub issue を参照してください。
もしこの機能がどうしても必要な場合は、FOSでCKEditor4の代替プラグインが開発されています。
今後のアップデートにご期待ください。
パート2: JavaScriptでエディタをカスタマイズ
前述したように、新しいウィジェットは古いウィジェットとAPI非互換です。いくつかの違いは以下の通りです。
グローバルオブジェクト
CKEditor4では、グローバルライブラリオブジェクトはCKEDITORと呼ばれていましたが、現在はClassicEditorとなっています。
ウィジェットインスタンスのハンドルを取得する
CKEditor4ではCKEDITOR.instances.P1_ITEMを実行することができましたが、apex.item('P1_ITEM').getEditor()で同じことができるようになりました。
プラグイン
CKEditor の外部プラグインはもうありませんし、動的に追加することもできないようです。
自分がアクセスできるプラグインを確認するには、リッチテキストエディタを含むページのブラウザコンソールで以下のコマンドを実行してください。
ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName)
JavaScriptの初期化コード
この属性を介してエディタを設定することも変更されました。
要するに、すべてのカスタマイズは options.editorOptions を通らなければならないということです。
| function(options){ // add your changes to: options.editorOptions return options; } |
もちろん、実際にどのような変更を設定できるかを知るには、API ドキュメントを参照する必要があります。
いくつかの例を見てみましょう。
例1 ツールバーのカスタマイズ
JavaScriptの初期化コード属性を以下のように設定します。
| function(options){ options.editorOptions.toolbar = [ 'heading', '|', 'bold', 'italic', 'underline', '|', 'todoList', 'insertTable' ]; return options; } |
結果として
例2 機能のカスタマイズ
デフォルトのテーブルウィジェットはテーブルを挿入しますが、退屈なものです。
以下のようにして、すべてのテーブルコントロールを有効にすることができます。
| function(options){ options.editorOptions.table = { contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ] }; return options; } |
これは、テーブルで作業するときに余分なツールバーを表示します。
例3 カスタムツールバーボタンの作成
おそらくあまり一般的な要件ではありませんが、次の例ではシンプルなツールバーボタンを作成する方法を示しています。
| function(options){ class CustomButton extends ClassicEditor.libraryClasses.Plugin { init(){ const editor = this.editor; editor.ui.componentFactory.add('customButton', locale => { const view = new ClassicEditor.libraryClasses.ButtonView(locale); view.set({ // an icon can be provided as SVG label: 'Custom Button', withText: true, tooltip: true }); view.on('execute', () => { alert('cutom button clicked!'); }); return view; }); } } options.editorOptions.extraPlugins.push(CustomButton); options.editorOptions.toolbar.push('customButton'); return options; } |
結果的には
CKEditor5でツールバーボタンのようなカスタム要素を作成する場合、プラグインやButtonViewのような基本ユーティリティクラスを参照する必要があります。
残念ながら、APEXに同梱されているCKEditor5のビルドでは、これらのクラスのすべてが利用できるわけではありません。
CKEditor5は静的なNodeJSコンテキストでビルドされ、拡張されることを意図しています。
APEXのコンテキストでは、これらすべてのクラスに直接アクセスすることはできません。
幸いにも、ClassicEditor.libraryClassesの下に2つのクラスが公開されています。
これらのクラスは単純なボタンを作るのには十分でしょう。
今後の APEX バージョンでさらに多くのユーティリティクラスが公開されると思いますが、
現実的には、このディストリビューションがカスタムビルドほど汎用性の高いものになることはないでしょう。
例4 初期化後のウィジェットとのインタラクション
もっと簡単な例を挙げると、以下のようにエディタの readOnly モードを動的に切り替えることができます。
apex.item('P1_EDITOR').getEditor().isReadOnly = true; // or false
このコードを初期化した後、例えばダイナミックアクションの中で実行します。
パート３：まとめ
CKEditor5への移行は少し破壊的に見えるかもしれませんが、いつかはそうならざるを得なかったのです。
私は、新しいモダンなデザインと、リッチテキストエディタをインタラクティブなグリッドカラムとして使えるようになったことにとても感謝しています。
ライブラリ自体については、GitHubのリポジトリやリリースログを見るだけでも、開発は非常に速く、新機能やプラグインの導入も目を見張る速さで進んでいます。
今後のブログ記事では、このリッチテキストエディタについてさらに掘り下げていきたいと思います。
コメント
コメントを投稿