エディターの構成の変更
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
さまざまな種類のWYSIWYGエディターを使用して、ポートレットのコンテンツを編集できます。 編集しているコンテンツに応じて、エディターを変更して、ニーズに合わせてカスタマイズされた構成を提供することができます。 このチュートリアルでは、Liferay DXPのサポートされているWYSIWYGエディターのデフォルト構成を変更して、要件を満たす方法を学習します。
エディターの構成の更新
エディターの構成を変更するには、 EditorConfigContributor
インターフェースを実装するコンポーネントを持つモジュールを作成します。 次の手順に従って、Liferay DXPのWYSIWYGエディターのいずれかを変更します。
-
ポートレットの
build.gradle
ファイルを開き、com.liferay.portal.kernel
バージョン
を3.6.2
更新します。 これは、Liferay DXPリリースにバンドルされているバージョンです。 -
モジュールの
src
ディレクトリに一意のパッケージ名を作成し、そのパッケージにBaseEditorConfigContributor
クラスを拡張する新しいJavaクラスを作成します。 -
EditorConfigContributor
サービスを実装するコンポーネントクラスを作成します。@Component( property = { }, service = EditorConfigContributor.class )
-
次のインポートを追加します。
import com.liferay.portal.kernel.editor.configuration.BaseEditorConfigContributor; import com.liferay.portal.kernel.editor.configuration.EditorConfigContributor; import com.liferay.portal.kernel.json.JSONArray; import com.liferay.portal.kernel.json.JSONFactoryUtil; import com.liferay.portal.kernel.json.JSONObject; import com.liferay.portal.kernel.portlet.RequestBackedPortletURLFactory; import com.liferay.portal.kernel.theme.ThemeDisplay;
-
エディターの名前、エディターの構成キー、および/またはエディターが存在するポートレット名を指定します。 これらの3つのプロパティは、独立して、または任意の順序で一緒に指定できます。 使用可能なプロパティとその使用方法の詳細については、
EditorConfigContributor
インターフェイスのJavadocを参照してください。 以下の構成例では、contentEditor
構成キーとAlloyeditor
名前キーで識別されるAlloyEditorのコンテンツエディターを変更します。2つのポートレット名が宣言され(BlogsとBlogs Admin)、サービスがそれらのポートレットのコンテンツエディターに適用されることを指定します。 最後に、より高い サービスのランク提供することにより、構成はデフォルトの構成をオーバーライドします。
@Component( property = { "editor.config.key=contentEditor", "editor.name=alloyeditor", "javax.portlet.name=com_liferay_blogs_web_portlet_BlogsPortlet", "javax.portlet.name=com_liferay_blogs_web_portlet_BlogsAdminPortlet", "service.ranking:Integer=100" }, service = EditorConfigContributor.class )
-
populateConfigJSONObject()
メソッドをオーバーライドして、エディターのカスタム構成を提供します。 このメソッドは、元の構成JSONオブジェクトを更新します。 また、既存の構成、または別の* EditorConfigContributor
によって導入された他の構成を更新または削除できます。@Override public void populateConfigJSONObject( JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes, ThemeDisplay themeDisplay, RequestBackedPortletURLFactory requestBackedPortletURLFactory) { }
-
populateConfigJSONObject
メソッドでは、JSONObject
をインスタンス化して、エディターの現在の構成を保持する必要があります。 たとえば、以下のコードスニペットを使用して、エディターで使用可能なツールバーを取得できます。JSONObject toolbars = jsonObject.getJSONObject("toolbars");
-
ツールバーを取得したので、変更できます。 以下の例では、カメラボタンをAlloyEditorの[追加]ツールバーに追加します。 ツールバー構成オブジェクトから Add ボタンを
JSONArray
として抽出し、ボタンをそのJSONArray
追加します。if (toolbars != null) { JSONObject toolbarAdd = toolbars.getJSONObject("add"); if (toolbarAdd != null) { JSONArray addButtons = toolbarAdd.getJSONArray("buttons"); addButtons.put("camera"); } }
構成JSONオブジェクトは、
populateConfigJSONObject
メソッドで実装した変更とともにエディターに渡されます。 -
最後に、モジュールのJARファイルを生成し、
deploy
フォルダーにコピーします。 モジュールがインストールされ、サービスレジストリにアクティブ化されると、新しいエディター構成が使用可能になります。
Liferay DXPは、いくつかの異なるタイプのWYSIWYGエディターをサポートしています。
各エディターの構成APIにアクセスして、各エディターが構成設定に提供するものを確認してください。