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

Liferay DXP 2024.Q2+/ポータル GA120+

Editor Config Contributor クライアント拡張機能は、 ConfigContributor.java ファイル内の既存の CKEditor 構成をオーバーライドします。 クライアント拡張機能から開始します ( サンプルワークスペースから)。

前提条件

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

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 クライアント拡張機能を展開するためのツールが手に入りました。

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

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 で、Editor Config Contributorクライアント拡張機能の主要な設定（ type、 editorConfigKeys、およびJavaScriptリソースファイルの場所を定義する url プロパティ）が含まれています。 利用可能なプロパティの詳細については、 Editor Config Contributor 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;
        });
    }
}

また、Alloy エディター構成にビデオ ボタンを追加するこのコードも含まれています。

// 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

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

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

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

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

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

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

Liferay が起動したら、サンプル ワークスペースのクライアント拡張機能のフォルダーから次のコマンドを実行します。

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

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

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. サイト メニューで、 コンテンツ & データ → Web コンテンツをクリックします。

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

新しい「Hello」ボタンがツールバーの端に表示されます。

Liferay で Editor Config Contributor クライアント拡張機能を正常に使用しました。 次は他のクライアント拡張タイプのデプロイメントを試してみましょう。

関連トピック

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