エディターの構成の変更

エディターの構成の変更

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

さまざまな種類のWYSIWYGエディターを使用して、ポートレットのコンテンツを編集できます。 編集しているコンテンツに応じて、エディターを変更して、ニーズに合わせてカスタマイズされた構成を提供することができます。 このチュートリアルでは、Liferay DXPのサポートされているWYSIWYGエディターのデフォルト構成を変更して、要件を満たす方法を学習します。

エディターの構成の更新

エディターの構成を変更するには、 EditorConfigContributor インターフェースを実装するコンポーネントを持つモジュールを作成します。 次の手順に従って、Liferay DXPのWYSIWYGエディターのいずれかを変更します。

  1. OSGiモジュールを作成します

  2. ポートレットの build.gradle ファイルを開き、 com.liferay.portal.kernel バージョン3.6.2更新します。 これは、Liferay DXPリリースにバンドルされているバージョンです。

  3. モジュールの src ディレクトリに一意のパッケージ名を作成し、そのパッケージに BaseEditorConfigContributor クラスを拡張する新しいJavaクラスを作成します。

  4. EditorConfigContributor サービスを実装するコンポーネントクラスを作成します。

    @Component(
        property = {
    
        },
    
        service = EditorConfigContributor.class
    )
    
  5. 次のインポートを追加します。

    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;
    
  6. エディターの名前、エディターの構成キー、および/またはエディターが存在するポートレット名を指定します。 これらの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
    )
    
  7. populateConfigJSONObject() メソッドをオーバーライドして、エディターのカスタム構成を提供します。 このメソッドは、元の構成JSONオブジェクトを更新します。 また、既存の構成、または別の * EditorConfigContributorによって導入された他の構成を更新または削除できます。

    @Override
    public void populateConfigJSONObject(
        JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
        ThemeDisplay themeDisplay,
        RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
    
    }
    
  8. populateConfigJSONObject メソッドでは、 JSONObject をインスタンス化して、エディターの現在の構成を保持する必要があります。 たとえば、以下のコードスニペットを使用して、エディターで使用可能なツールバーを取得できます。

    JSONObject toolbars = jsonObject.getJSONObject("toolbars");
    
  9. ツールバーを取得したので、変更できます。 以下の例では、カメラボタンを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 メソッドで実装した変更とともにエディターに渡されます。

  10. 最後に、モジュールのJARファイルを生成し、 deploy フォルダーにコピーします。 モジュールがインストールされ、サービスレジストリにアクティブ化されると、新しいエディター構成が使用可能になります。

Liferay DXPは、いくつかの異なるタイプのWYSIWYGエディターをサポートしています。

各エディターの構成APIにアクセスして、各エディターが構成設定に提供するものを確認してください。

関連トピック

エディターに新しい動作を追加する

AlloyEditorの変更

WYSIWYGエディターのポートレットへの追加

« WYSIWYGエディターのポートレットへの追加エディターに新しい動作を追加する »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています