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

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

Liferay DXP 2026.Q1+

Editor Config Contributor クライアント拡張機能 を使用して、Liferay のテキストエディタの設定を変更できます。この変換処理はJavaScriptで実行され、元のデータを変更するのではなく、コピーを返します。まずは、複数の例を含む Liferay の サンプルワークスペースを検討してください。

注記

この例では、Liferay DXP 2026.Q2+ のデフォルトのテキストエディタである CKEditor 5 を使用しています。 Liferay DXP 2026.Q1 では、拡張リッチテキストエディタ (LPD-11235) リリース機能フラグ を使用して有効化します。このアップグレードが既存のコンテンツにどのような影響を与えるかについては、 CKEditor 5 へのアップグレード を参照してください。

前提条件

クライアント拡張機能の開発を開始するには、以下の手順に従ってください。

  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

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

クライアント拡張機能を検査および変更する

サンプルワークスペースの client-extensions/ フォルダーには、5 つの Editor Config Contributor サンプル、 liferay-sample-editor-config-contributor-1 から -5 が含まれています。この例では、 client-extensions/liferay-sample-editor-config-contributor-2/ フォルダー内のサンプルを使用します。このサンプルは、CKEditor 5 の下に単語数の表示を追加します。カスタム CKEditor 5 プラグイン、カスタム CKEditor 5 スタイル、および従来の CKEditor 4 と Alloy Editor のサンプルについては、 カスタム CKEditor 5 プラグインの追加、 カスタム CKEditor 5 スタイルの追加、および CKEditor 4 と Alloy Editor の設定 を参照してください。

クライアント拡張機能は、フォルダー内の client-extension.yaml ファイルで定義されています。

assemble:
    -   from: build
        into: static
liferay-sample-editor-config-contributor-2:
    editorConfigKeys:
        -   sampleReactCKEditor5ClassicEditor
    name: Liferay Sample Editor Config Contributor 2
    type: editorConfigContributor
    url: index.js

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

クライアント拡張機能は、その ID (liferay-sample-editor-config-contributor-2)、そのタイプ (editorConfigContributor)、および適用対象のエディター (editorConfigKeys ) を宣言します。その url プロパティは、ビルドによって生成されるバンドルされた JavaScript ファイルである index.jsを指しています。詳細については、 エディター設定コントリビューター YAML 設定リファレンス を参照してください。

拡張機能のロジックは src/index.ts にあり、TypeScript で記述されています。クライアント拡張機能をデプロイすると、サンプルの build スクリプトが実行され、このファイルが build/index.js にバンドルされます。

import {
	EditorConfigTransformer,
	EditorTransformer,
	WordCount,
} from '@liferay/js-api/editor';

const editorConfigTransformer: EditorConfigTransformer<any> = (config) => {
	let displayEl: HTMLElement | null = null;

	return {
		...config,
		extraPlugins: [...(config.extraPlugins ?? []), WordCount],
		wordCount: {
			onUpdate: ({
				characters,
				words,
			}: {
				characters: number;
				words: number;
			}) => {
				if (!displayEl) {
					displayEl = document.createElement('div');
					displayEl.className = 'mt-1 text-secondary';
					displayEl.dataset.testid = 'word-count-container';

					document
						.querySelector('.ck-editor__editable')
						?.closest('.ck-editor')
						?.parentElement?.appendChild(displayEl);
				}

				displayEl.textContent = `Words: ${words} | Characters: ${characters}`;
			},
		},
	};
};

const editorTransformer: EditorTransformer<any> = {
	editorConfigTransformer,
};

export default editorTransformer;

editorConfigTransformer 関数は、エディタの現在の構成を受け取り、変換されたコピーを返します。ここでは、公式の WordCount プラグインを構成の extraPlugins 配列に追加し、プラグインの wordCount.onUpdate コールバックを使用して、エディタの下に div 要素を追加します。この要素は、テキストの長さを 単語数: N | 文字数: N として報告し、入力するたびに更新されます。

サンプルでは、 package.json ファイルで単一の依存関係を宣言しています。 "@liferay/js-api": "0.8.0"。 @liferay/js-api/editor サブパスは、トランスフォーマータイプを提供し、公式の WordCount プラグインを再エクスポートするため、コードは、Liferay DXP に付属する CKEditor バージョンを固定することなく、1 つの場所からプラグインをインポートします。 WordCount は、サブパスが再エクスポートする唯一の公式プラグインです。プラグインのコードは、Liferay DXP が実行時に提供する CKEditor パッケージ内に存在するため、サンプルの ビルド スクリプトは、そのパッケージをバンドルするのではなく、外部としてマークします。

esbuild src/index.ts --outdir=build --bundle --format=esm --external:@ckeditor/ckeditor5-word-count

サンプルでは、エディタ設定キーが 1 つだけ宣言されています。 sampleReactCKEditor5ClassicEditor。 Liferayのエディタサンプルアプリケーションの1つがそのキーを使用していますが、これらのアプリケーションは標準のLiferayインストールには含まれていないため、サンプルをそのままデプロイしてもLiferayのUIには目に見える影響はありません。拡張機能をデプロイしてもエディタに変化が見られない場合は、まず editorConfigKeys を確認してください。拡張機能をウェブコンテンツで表示するには、 rich_text を editorConfigKeys リストに 追加します。:

editorConfigKeys:
    -   rich_text
    -   sampleReactCKEditor5ClassicEditor

rich_text キーは、Web コンテンツの Content フィールドを含む Liferay DXP のリッチ テキスト フィールドに対してクライアント拡張機能を適用します。

次に、クライアント拡張機能をデプロイします。

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

Liferay DXP の新しいインスタンスを起動するには、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:2026.q1.9-lts

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

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

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

これによりクライアント拡張機能がビルドされ、zipファイルがLiferayの deploy/ フォルダにデプロイされます。

注記

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

Liferayインスタンスのコンソールでデプロイメントを確認してください。

STARTED liferaysampleeditorconfigcontributor2_...

クライアント拡張機能を確認する

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

  1. グローバルメニュー (Global Menu) を開き、開発者と統合の下にある アプリケーション → クライアント拡張機能 に移動します。

  2. Liferay Sample Editor Config Contributor 2 クライアント拡張機能が表示されていることを確認してください。

    クライアント拡張機能マネージャーには、デプロイ済みのLiferay Sample Editor Config Contributor 2クライアント拡張機能が一覧表示されます。

    次に、ウェブコンテンツの単語数表示を確認します。

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

  4. サイトメニュー (Site Menuを開き、 コンテンツ & データを展開し、 Web コンテンツ をクリックします。

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

  6. コンテンツフィールドのエディタに入力してください。入力するたびに文字数表示が更新されます。

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

Adding a Custom CKEditor 5 Plugin

Adding Custom CKEditor 5 Styles

Configuring CKEditor 4 and Alloy Editor

Editor Config Contributor YAML Configuration Reference