CKEditor 4とAlloy Editorの設定
Liferay DXP 2026.Q1+
サンプルワークスペースの liferay-sample-editor-config-contributor-1 クライアント拡張機能は、Liferay の従来のテキストエディタを設定します。このMODは、Alloy Editorのフローティングツールバーに「ビデオを挿入」ボタンを、CKEditor 4のツールバーに「AIコンテンツを作成」ボタンを追加します。お使いの環境でこれらのエディタがまだ動作している場合は、サンプルをテンプレートとして使用して、独自のツールバーを変更できます。このクライアント拡張機能の種類について詳しくは、 エディター設定コントリビュータークライアント拡張機能の使用 を参照してください。
Alloy EditorとCKEditor 4はLiferayの従来型テキストエディタであり、Alloy EditorはCKEditor 4をベースに構築されています。これらのエディタは Liferay DXP 2026.Q2 で非推奨となり、CKEditor 5 にアップグレードする必要があります。
LPD-11235機能フラグの動作は、バージョンによって異なります。 Liferay DXP 2026.Q1 では、 リリース機能フラグ は Enhanced Rich Text Editor という名前で、これを有効にすると CKEditor 5 に切り替わります。 Liferay DXP 2026.Q2+ では、CKEditor 5 がデフォルトであり、LPD-11235 は 非推奨機能フラグなので、これを有効にすると、アップグレードを計画している間は CKEditor 4 に戻ります。
詳細については、 CKEditor 5 へのアップグレード および 2026.Q2 メンテナンス モードと非推奨 を参照してください。
前提条件
Editor Config Contributorクライアント拡張機能を使用するには、以下の手順に従ってください。
-
サポートされているバージョンの Java をインストールしてください。
-
サンプルワークスペースをダウンロードして解凍してください。
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\=zipunzip com.liferay.sample.workspace-latest.zip
これで、サンプルのエディター設定コントリビュータークライアント拡張機能を調べたり、変更したりできるようになりました。
クライアント拡張定義を確認する
エディター設定コントリビューターの例は、サンプルワークスペースの client-extensions/liferay-sample-editor-config-contributor-1/ フォルダーにあります。その client-extension.yaml ファイルには、以下の詳細が定義されています。
assemble:
- from: build
into: static
liferay-sample-editor-config-contributor-1:
editorConfigKeys:
- description
- fragmentEntryLinkRichTextEditor
- sampleAlloyEditor
- sampleClassicEditor
- sampleLegacyEditor
- sampleReactClassicEditor
name: Liferay Sample Editor Config Contributor 1
type: editorConfigContributor
url: index.js
クライアント拡張機能は、その ID (liferay-sample-editor-config-contributor-1)、そのタイプ (editorConfigContributor)、およびそれが適用するエディター (editorConfigKeys ) を宣言します。その url プロパティは、ビルドによって生成されるバンドルされた JavaScript ファイルである index.jsを指しています。 assemble ブロックは、 build/ フォルダ全体を、 index.js ファイルを含む静的リソースとしてクライアント拡張機能の .zip ファイルにパッケージ化します。詳細については、 エディター設定コントリビューター YAML 設定リファレンス を参照してください。
このサンプルは、ページフラグメント内のリッチテキスト要素のエディター (fragmentEntryLinkRichTextEditor) と、標準では含まれていないいくつかのサンプルエディターアプリケーションを対象としています。
サンプルの唯一の依存関係は @liferay/js-api バージョン 0.8.0であり、これはエディターのトランスフォーマー型を提供します。ビルドでは、1つのesbuildコマンドを実行するだけで、src/index.tsが build/index.jsにバンドルされます：
esbuild src/index.ts --outdir=build --bundle --format=esm
変圧器コードを調べる
src/index.ts ファイルは、 editorConfigTransformer 関数を定義し、それを EditorTransformer オブジェクトでラップし、そのオブジェクトをモジュールのデフォルトエクスポートとしてエクスポートします。
import {
EditorConfigTransformer,
EditorTransformer,
} from '@liferay/js-api/editor';
const editorConfigTransformer: EditorConfigTransformer<any> = (config) => {
// ...
};
const editorTransformer: EditorTransformer<any> = {
editorConfigTransformer,
};
export default editorTransformer;
Liferay は editorConfigTransformer を呼び出し、拡張機能の editorConfigKeys に一致する各エディターの構成オブジェクトを使用して、返された構成を適用します。これらのキーはCKEditor 5のインスタンスにも一致するため、関数本体はAlloy Editor、CKEditor 5、CKEditor 4の順に3種類のエディタを処理します。
合金エディター
この関数はまず、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,
};
}
}
このブランチは、config.toolbars.styles.selections 内のテキスト選択部分を検出し、そのボタンリストに動画ボタンを追加します。 Alloy Editorのフィールドでテキストを選択すると、フローティングツールバーに「ビデオを挿入」ボタンが表示されます。
CKEditor 5
2番目のブランチはCKEditor 5を扱います。
// CKEditor 5
if (config.editorType === 'ckeditor5') {
return {
...config,
toolbar: [
'accessibilityHelp',
'|',
'undo',
'redo',
'|',
'alignment',
],
};
}
config.editorType のチェックが重要なのは、トランスフォーマーが CKEditor 4 と CKEditor 5 の両方のエディターの構成を受け取るためです。タイプが ckeditor5の場合、このブランチはツールバーを accessibilityHelp、 undo、 redo、および alignment コントロールに置き換えてから、構成を返します。この分岐がないと、CKEditor 5 の設定が下の CKEditor 4 ハンドラーに到達し、フラグメント エディタがレンダリングできないツールバーが返ってきます。
CKEditor 4
以前の分岐で返されなかった設定はすべて、CKEditor 4 ハンドラに渡されます。
// 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 4 はツールバーを 2 つの形式で表現し、このブランチはその両方を処理します。 config.toolbar が文字列の場合、構成内の toolbar_<name> 配列に名前を付け、ブランチは AICreator ボタンをその配列に追加します。 config.toolbar が配列の場合、分岐はボタンを直接その配列にプッシュします。返された構成には、 aicreator から extraPluginsが追加され、既にリストされているプラグインは保持されます。エディターでは、ツールバーの一番最後に「AIコンテンツを作成」というボタンが表示されます。
クライアント拡張機能をデプロイする
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-1/ フォルダから次のコマンドを実行します。
../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)
これによりクライアント拡張機能がビルドされ、zipファイルがLiferayの deploy/ フォルダにデプロイされます。 Liferay SaaSへのデプロイを含む完全なデプロイワークフローについては、 Liferayへのクライアント拡張機能のデプロイ を参照してください。
Liferayインスタンスのコンソールで、デプロイが成功したことを確認してください。
STARTED liferaysampleeditorconfigcontributor1_...
エディターの変更内容を確認する
変更が適用されていることを確認するには、フラグメントの リッチテキスト要素 の編集を開始します。このエディタは、クライアント拡張機能の editorConfigKeys 値 (fragmentEntryLinkRichTextEditor によって対象とされています。
CKEditor 5 がアクティブな場合、そのフィールドには CKEditor 5 のブランチが割り当てられ、そのツールバーには、ブランチが設定するアクセシビリティヘルプ、元に戻す、やり直し、および配置コントロールが表示されます。
LPD-11235 非推奨機能フラグを有効にすると、インスタンスが CKEditor 4 に切り替わります。 LiferayはこのフィールドをAlloy Editorでレンダリングするため、Alloy Editorブランチが代わりにこのフィールドを処理します。フィールド内のテキストを選択すると、フローティングツールバーに「ビデオを挿入」ボタンが表示されます。
CKEditor 4 ブランチの実行を確認するには、CKEditor 4 エディタの設定キーを editorConfigKeys にリストします。このブランチは、そのエディターのツールバーに「AIコンテンツを作成」ボタンを追加します。