エディターに新しい動作を追加する
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
ユーザー用にいくつかの異なるWYSIWYGエディターから選択できます。各エディターは構成可能で、長所と短所があります。 ただし、構成だけでは、必要な機能が常に公開されるとは限りません。 これらの場合、 liferay-util：dynamic-include JavaScript拡張ポイントを使用して、エディターインスタンスにプログラムでアクセスし、必要なエディターエクスペリエンスを作成できます。 エディターを構成/変更するために、エディターのインスタンス化の直後にJavaScriptコードを挿入します。
このチュートリアルでは、このJavaScript拡張ポイントの使用方法を学習します。
JavaScriptをWYSIWYGエディターに挿入する
liferay-util：dynamic-include 拡張ポイントは、構成可能なエディターのJSPファイルにあります。これは、エディターインスタンスにJavaScriptを挿入するためのゲートウェイです。
-
モジュールにファイルを登録する必要があるため、参照する意味のあるフォルダーにエディター機能を含むJSファイルを作成します。 拡張ポイントは、エディターの初期化直後にJavaScriptコードを挿入します。
Liferayは、一部のアプリケーションにJavaScriptコードを挿入します。
- creole \ _dialog \ _definition.js wikiの場合
- creole \ _dialog \ _show.js ウィキ用
- dialog \ _definition.js さまざまなアプリケーション用
これらのJSファイルは、選択した言語（HTML、BBCode、Creole）がサポートするものに応じて、ダイアログに表示されるフィールドを再定義します。 たとえば、Creoleはテーブルセルの背景色をサポートしていないため、Creoleモードで実行しているときにユーザーに表示されるオプションからテーブルセルが削除されます。
-
モジュールの
srcディレクトリに一意のパッケージ名を作成し、そのパッケージに新しいJavaクラスを作成します。 命名規則に従うために、クラス名は変更するエディターで始まり、カスタム属性が続き、 DynamicInclude 終わる必要があります（例：CKEditorCreoleOnEditorCreateDynamicInclude.java）。 Javaクラスは、DynamicIncludeインターフェイスを実装する必要があります。 -
クラスの宣言のすぐ上に、次の注釈を挿入します。
@Component（immediate = true、service = DynamicInclude.class）これにより、コンポーネントの実装クラスが宣言され、ポータルにデプロイされるとモジュールが開始されます。
-
DynamicInclude抽象メソッドをまだオーバーライドしていない場合は、今すぐオーバーライドします。 編集する実装された2つのメソッドがあります：include（...）およびregister（...）。 -
include（...）メソッドで、カスタムJSファイルを含むバンドルを取得します。 JSファイルをURLとして取得し、そのコンテンツをエディターに注入します。creole_dialog_definition.jsファイルに対してこれを行うコードは次のとおりです。バンドルbundle = _bundleContext.getBundle（）; URL entryURL = bundle.getEntry（ "/ META-INF / resources / html / editors / ckeditor / extension" + "/creole_dialog_definition.js"）; StreamUtil.transfer（entryURL.openStream（）、response.getOutputStream（））;include（...）メソッドでは、エディター構成を取得し、ユーザーが選択した構成に基づいて注入するJSファイルを選択することもできます。 たとえば、これは、表のセルに背景色を表示するというクレオールの欠陥を以前に扱った提案されたユースケースに適用可能です。 Liferayのは、これを実現（...）を含むにおける方法CKEditorCreoleOnEditorCreateDynamicIncludeクラス。 -
バンドルを正常に取得できるように、バンドルのコンテキストをインスタンス化してください。 ベストプラクティスとして、アクティベーションメソッドを作成し、プライベートフィールドとして
BundleContextを設定してこれを行います。 以下に例を示します。@Activate protected void activate（BundleContext bundleContext）{ _bundleContext = bundleContext; } private BundleContext _bundleContext;このメソッドは
@Activateアノテーションを使用します。これは、サービスコンポーネントが要件を満たしたときに呼び出す必要があることを指定します。 このデフォルトの例では、include（...）メソッドで_bundleContextが使用されました。 -
次に、カスタマイズしているエディターを登録します。 たとえば、JSコードをCKEditorのJSPファイルに挿入する場合、コードは次のようになります。
dynamicIncludeRegistry.register（ "com.liferay.frontend.editor.ckeditor.web＃ckeditor＃onEditorCreate"）;これにより、CKEditorがDynamic Includeレジストリに登録され、作成されたJSコードがエディターに挿入されるように指定されます。
利用可能なWYSIWYGエディターの特定の実装を使用するように個々のJSPページを構成できるのと同様に、登録プロセスにも同じ実装オプションを使用できます。 詳細については、
portal.propertiesの Editors セクションをご覧ください。 たとえば、CKEditorのCreole実装を構成するには、次のキーを使用できます。「com.liferay.frontend.editor.ckeditor.web＃ckeditor_creole＃onEditorCreate」
それでおしまい\！ これで、作成したJSコードが、指定したエディターインスタンスに挿入されます。 JavaScriptを使用して、Liferay DXPがサポートするWYSIWYGエディターに新しい動作を追加できるようになりました！