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

CKEditor 5 にカスタムスタイルを追加する

Liferay DXP 2026.Q1+

Editor Config Contributorクライアント拡張機能を使用すると、CKEditor 5のスタイルドロップダウンに独自の項目を追加できます。カスタムスタイルには2つの構成要素があります。スタイル定義によってエントリがエディタに登録され、CSSによってスタイルが視覚的に効果を発揮します。この例では、段落を強調表示するための注目コンテンツスタイルを追加するサンプルクライアント拡張機能を使用します。このクライアント拡張機能の種類について詳しくは、エディター設定コントリビュータークライアント拡張機能の使用を参照してください。

注記

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

前提条件

Editor Config Contributorクライアント拡張機能を使用するには、以下の手順に従ってください。

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

注記

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

サンプルワークスペースをダウンロードして解凍してください。

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

com.liferay.sample.workspace-latest.zip を解凍します。

これで、サンプルのエディター設定コントリビュータークライアント拡張機能を調べたり、変更したりできるようになりました。

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

エディター設定コントリビューターの例は、サンプルワークスペースの client-extensions/liferay-sample-editor-config-contributor-4/ フォルダーにあります。その client-extension.yaml ファイルには、以下の詳細が定義されています。

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

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

重要

サンプルのキー (sampleReactCKEditor5ClassicEditor) は、Liferay のサンプルエディターアプリケーションの 1 つを使用していますが、これは標準の Liferay インストールには含まれていません。サンプルを使用するには、設定したいエディタに合わせてキーを更新してください。

Liferay DXP のリッチテキストフィールド (Web コンテンツの Content フィールドを含む) に拡張機能を適用するには、キーリストに rich_text を追加します。

editorConfigKeys:
    - rich_text
    - sampleReactCKEditor5ClassicEditor

スタイル定義とCSSを確認する

変換ロジックは src/index.tsにあり、エディタの設定オブジェクトを受け取り、変換されたコピーを返す editorConfigTransformer 関数をエクスポートします。

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

const STYLE_ELEMENT_ID = 'liferay-sample-editor-config-contributor-4-styles';

const editorConfigTransformer: EditorConfigTransformer<any> = (config) => {
	if (!document.getElementById(STYLE_ELEMENT_ID)) {
		const styleEl = document.createElement('style');

		styleEl.id = STYLE_ELEMENT_ID;
		styleEl.textContent = `
			.ck-content .featured-content {
				background-color: #e8f4fd;
				border-left: 4px solid #2196f3;
				border-radius: 0 4px 4px 0;
				padding: 8px 16px;
			}
		`;

		document.head.appendChild(styleEl);
	}

	const toolbar = config.toolbar as any;
	const existingItems: string[] = Array.isArray(toolbar)
? ツールバー
		: ツールバー?.アイテム ?? [];

	return {
		...config,
		style: {
			definitions: [
				...((config as any).style?.definitions ?? []),
				{
					classes: ['featured-content'],
					element: 'p',
					name: 'Featured Content',
				},
			],
		},
		toolbar: {
			items: existingItems.includes('style')
? existingItems
				: [...existingItems, '|', 'style'],
		},
	};
};

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

export default editorTransformer;

トランスフォーマーは style.definitionsにエントリを 1 つ追加します。これは Featured Content という名前のスタイルで、 featured-content クラスを段落要素に適用します。スプレッド演算子は既に存在する定義を保持するため、この例ではリストを置き換えるのではなく拡張しています。登録が完了すると、注目コンテンツはエディターのスタイルドロップダウンメニューに表示されます。

また、 スタイル がまだ存在しない場合、トランスフォーマーはツールバーの項目に区切り文字 ('|') と 'スタイル' を追加します。これにより、ツールバーに「スタイル」ドロップダウンが常に表示されるようになります。ツールバーの設定は、2 つの形式で表示されます。項目名の単純な配列、または 個の項目 配列を持つオブジェクトです。 existingItems 変数には、存在する形状のアイテム名が格納されているため、 'style' のチェックはどちらの場合にも機能します。

定義だけでは不十分です。定義はエディタにどのクラスを適用するかを伝えるものですが、CSSがなければスタイルは目に見える効果を発揮しません。エディタービューでカスタム CSS を適用するには、サンプルでは <style> 要素を document.head に挿入します。挿入する前に、 liferay-sample-editor-config-contributor-4-styles ID をチェックし、要素が複数回追加されるのを防ぎます。適用すると、 注目のコンテンツ 段落に水色の背景、青色の左側の境界線、および余分なパディングが追加されます。

CKEditor 5 は、編集領域を ck-content クラスでマークします。プレフィックスによりルールはエディター内のコンテンツにのみ適用されるため、ページ上の他の場所にある featured-content 要素は影響を受けません。

このCSSはエディターにのみ適用されることに注意してください。公開ページで featured-content のスタイルを設定するには、 CSS または Theme CSS クライアント拡張機能を使用して、同じルールをサイトに提供する必要があります。

注記

トランスフォーマーは、設定オブジェクトと標準のDOM APIのみにアクセスします。そのため、この拡張機能には @ckeditor パッケージは必要ありません。 package.json は、1 つの依存関係 "@liferay/js-api": "0.8.0"を宣言しており、ビルドは外部ライブラリのないプレーンな esbuild src/index.ts --outdir=build --bundle --format=esm です。対照的に、カスタム CKEditor 5 プラグインの追加には、CKEditor タイプのパッケージとワイルドカード外部が必要です。

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

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が起動したら、新しいターミナルを開き、 client-extensions/liferay-sample-editor-config-contributor-4/ フォルダから次のコマンドを実行します。

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

これにより拡張機能がビルドされ、zip が Liferay の deploy/ フォルダーにデプロイされます。 Liferay SaaS のデプロイを含む完全なデプロイフローについては、 Editor Config Contributor Client Extension の使用を参照してください。

Liferayインスタンスのコンソールで、デプロイが成功したことを確認してください。

liferaysampleeditorconfigcontributor4_ が開始されました...

スタイルを確認する

rich_text を editorConfigKeysに含めて拡張機能をデプロイした後、Web コンテンツ記事にスタイルを適用します。

サイトメニュー (を開き、 コンテンツ & データを展開し、 Web コンテンツ をクリックします。
新規をクリックし、 基本ウェブコンテンツ を選択します。
コンテンツ欄に段落を入力し、その段落を選択します。
エディターツールバーで、 スタイル ドロップダウンを開き、 注目のコンテンツ を選択します。

この段落には featured-content スタイルが適用されます。背景は水色で、左側の枠線は青色です。