エディター設定コントリビュータークライアント拡張機能の使用

Liferay DXP 2024.Q2+/Portal GA120+

Editor Config Contributor クライアント拡張機能は、 ConfigContributor.java ファイル内の既存の CKEditor 設定を上書きします。 クライアント拡張機能から始めます（ サンプルワークスペース から）。

注

サンプルクライアント拡張機能で使用されている一部の機能は、LiferayインスタンスがCKEditor 5を使用している場合にのみ適用されます。

CKEditor 5 には Liferay DXP 2026.Q1+ が必要で、これらの変更を適用するには 有効化する必要があります。

前提条件

クライアント拡張の開発を開始するには、

1. サポートされているバージョンの Java をインストールしてください。

   注

   サポートされているJDK、データベース、環境については、互換性マトリックスを確認してください。 推奨される JVM 設定については、 JVM 構成 を参照してください。

2. サンプルワークスペースをダウンロードし、解凍します。

   curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip
   

   unzip com.liferay.sample.workspace-latest.zip
   

これで、最初のエディター設定コントリビュータークライアント拡張機能をデプロイするためのツールが揃いました。

クライアント拡張の検討と修正

Editor Config Contributor クライアント拡張機能は、サンプルワークスペースの client-extensions/liferay-sample-editor-config-contributor/ フォルダーにあります。 client-extension.yaml ファイルに定義されています。

liferay-sample-editor-config-contributor:
    editorConfigKeys:
        -   description
        -   fragmentEntryLinkRichTextEditor
        -   sampleAlloyEditor
        -   sampleClassicEditor
        -   sampleLegacyEditor
        -   sampleReactCKEditor5ClassicEditor
        -   sampleReactClassicEditor
    name: Liferay Sample Editor Config Contributor
    type: editorConfigContributor
    url: index.js

クライアント拡張機能の ID は liferay-sample-editor-config-contributor で、 type、 editorConfigKeys、および JavaScript リソースファイルの場所を定義する url プロパティなど、エディター設定コントリビューター クライアント拡張機能のキー構成が含まれています。 利用可能なプロパティの詳細については、 エディター設定コントリビューター YAML 設定リファレンス を参照してください。

また、assembleブロックが含まれています。

assemble:
    - from: build
      into: static

これは、 build/ フォルダー内のすべてのものが、ビルドされたクライアント拡張機能 .zip ファイルに静的リソースとして含まれることを指定しています。 Editor Config Contributorクライアント拡張機能内のJavaScriptファイルは、Liferayにおいて静的リソースとして使用されます。

src/index.ts ファイルには、Liferay のさまざまなエディタ用の新しいコンポーネントを追加するコードが含まれています。 これには、カスタムプラグイン helloworld を使用して CKEditor 5 に新しいボタンを追加するコードが含まれています。

// CKEditor 5

class HelloWorld extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add('helloworld', () => {
            const button = new ButtonView();

            button.set({
                label: 'Hello',
                withText: true,
            });

            button.on('execute', () => {
                editor.model.change((writer) => {
                    editor.model.insertContent(
                        writer.createText('Hello World ')
                    );
                });
            });

            return button;
        });
    }
}

重要

このようなカスタムプラグインはCKEditor 5にのみ追加できます。 CKEditor 5 には Liferay DXP 2026.Q1+ が必要で、最初にそれを有効にする必要があります 。

また、このコードには、Alloy Editorの設定にビデオボタンを追加する機能も含まれています。

// Alloy Editor

const toolbars: any = config.toolbars;

if (typeof toolbars === 'object') {
    interface ISelection {
        buttons: Array<string>;
        name: string;
    }

    const textSelection: ISelection = toolbars.styles?.selections?.find(
        (selection: ISelection) => selection.name === 'text'
    );

    if (textSelection.buttons) {
        textSelection.buttons.push('video');

        return {
            ...config,
            toolbars,
        };
    }
}

最後に、CKEditor 4の設定に「AIコンテンツを作成」ボタンが追加されます。

// CKEditor

const toolbar: string | [string[]] = config.toolbar;

const buttonName = 'AICreator';
let transformedConfig: any;

if (typeof toolbar === 'string') {
    const activeToolbar = config[`toolbar_${toolbar}`];

    activeToolbar.push([buttonName]);

    transformedConfig = {
        ...config,
        [`toolbar_${toolbar}`]: activeToolbar,
    };
}
else if (Array.isArray(toolbar)) {
    toolbar.push([buttonName]);

    transformedConfig = {
        ...config,
        toolbar,
    };
}

const extraPlugins: string = config.extraPlugins;

return {
    ...transformedConfig,
    extraPlugins: extraPlugins ? `${extraPlugins},aicreator` : 'aicreator',
};

CKEditor 5 の変更点を確認するには、クライアント拡張機能を別のエディタタイプに適用する必要があります。 client-extension.yamlで、 rich_text を editorConfigKeys のリストに追加します。

editorConfigKeys:
    - rich_text
    - description
    - sampleAlloyEditor
    - sampleClassicEditor
    - sampleLegacyEditor

このキーにより、このクライアント拡張機能は、Liferay DXP のリッチテキストフィールド（Web コンテンツのコンテンツフィールドを含む）に適用できるようになります。

ここで、クライアント拡張をデプロイします。

Liferayにクライアント拡張をデプロイする

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080 で Liferay にサインインしてください。 メールアドレス [e-mail] とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

Liferayが起動したら、サンプルワークスペース内のクライアント拡張機能のフォルダから以下のコマンドを実行してください。

../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)

これにより、クライアント拡張が構築され、Liferayのdeploy/フォルダにzipをデプロイします。

注

クライアント拡張機能を Liferay SaaS にデプロイするには、Liferay Cloud コマンドラインツール を使用して lcp deploy を実行します。

ヒント

ワークスペース内のすべてのクライアント拡張機能を同時にデプロイするには、 client-extensions/ フォルダーからコマンドを実行します。

Liferayインスタンスのコンソールでデプロイメントを確認します。

STARTED liferaysampleeditorconfigcontributor_7.4.3.99

クライアント拡張機能がデプロイされたので、正しく動作しているかどうかを確認してください。

1. グローバルメニュー (を開き、 アプリケーション タブに移動し、カスタムアプリの下にある クライアント拡張機能 をクリックします。

2. デプロイが成功すると、Liferay Sample Editor Config Contributor クライアント拡張機能がクライアント拡張機能マネージャーに表示されます。

   

3. 新規 をクリックし、いずれかオプションを選択してください。すべて WYSIWYG エディタを使用します。

新しいページでは、ツールバーの一番最後に「AIコンテンツを作成」という新しいボタンが表示されます。

![The WYSIWYG editor before and after the client extension's deployment](./using-an-editor-config-contributor-client-extension/images/02.png)

CKEditor 5 が有効になっている場合は、Web コンテンツ エディターに追加された新しいコントロールを参照してください。

1. Liferayのサイトに戻ってください。

2. サイトメニューで、 コンテンツ & データ → ウェブコンテンツ をクリックします。

3. 新規をクリックし、 基本ウェブコンテンツ を選択します。

新しい「こんにちは」ボタンはツールバーの一番右端に表示されます。

Liferayでエディター設定コントリビュータークライアント拡張機能を正常に使用できました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

関連トピック

• エディター設定コントリビューターYAML設定リファレンス
• CSSクライアント拡張の使用
• JSクライアント拡張の使用
• 基本的なカスタム要素の作成