スタイルツールバーへのボタンの追加

スタイルツールバーへのボタンの追加

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

AlloyEditorでコンテンツが選択または強調表示されると、スタイルツールバーが表示されます。 次から選択できる5つのスタイルツールバーがあります。

embedurl:埋め込みコンテンツが選択されたときに表示されます。

図1:埋め込みURLスタイルツールバーを使用すると、エディターで埋め込みコンテンツをフォーマットできます。

画像:画像が選択されたときに表示されます。

図2:画像スタイルツールバーを使用すると、エディターで画像をフォーマットできます。

リンク:ハイパーリンクが選択されたときに表示されます。

図3:リンクスタイルツールバーを使用すると、エディターでハイパーリンクを書式設定できます。

table:テーブルが選択されたときに表示されます。

図4:テーブルスタイルツールバーを使用すると、エディターでテーブルをフォーマットできます。

text:テキストが強調表示されたときに表示されます。

図5:テキストスタイルツールバーを使用すると、エディターで強調表示されたテキストを書式設定できます。

次の手順に従って、スタイルツールバーの1つにボタンを追加します。

  1. populateConfigJSONObject() メソッド内で、スタイルツールバーを取得します。

    JSONObject stylesToolbar = toolbarsJSONObject.getJSONObject("styles");
    
    if (stylesToolbar == null) {
            stylesToolbar = JSONFactoryUtil.createJSONObject();
    }
    
  2. 利用可能な選択ツールバーを取得します。

    JSONArray selectionsJSONArray = stylesToolbar.getJSONArray(
    "selections");
    
  3. 選択ツールバーを繰り返し処理では、あなたが(にあるボタン(複数可)を追加したいものを選択embedurl、画像リンク、または テキスト)、既存のボタンを取得し、追加するにはボタン。 以下の例では、追加 クリップボード プラグインの コピーカット、及び ペースト にボタンを テキスト 選択ツールバー。 ボタンは大文字と小文字が区別され、エイリアスされるか、プラグインの名前と一致しない場合があります。 プラグインの plugin.js ファイル for editor.ui.addButton を検索して、ボタンの名前を見つけます。

    for (int i = 0; i < selectionsJSONArray.length(); i++) {
            JSONObject selection = selectionsJSONArray.getJSONObject(i);
    
            if (Objects.equals(selection.get("name"), "text")) {
                    JSONArray buttons = selection.getJSONArray("buttons");
    
                    buttons.put("Copy");
                    buttons.put("Cut");
                    buttons.put("Paste");
            }
    }
    

    上記の例では、Liferay DXPのAlloyEditorバンドルされている

CKEditorプラグインの1つを追加します。 AlloyEditorにはデフォルトでいくつかのボタンがありますが、すべて有効になっているわけではありません。 [スタイル]ツールバーに追加できる既存のボタンの完全なリストは、以下の表にツールバー順に表示されています。

| テキスト            | 表            | 画像          | リンク      |
| --------------- | ------------ | ----------- | -------- |
| 大胆な             | tableHeading | imageCenter | linkEdit |
| コード             | tableRow     | 画像左         |          |
| h1              | tableColumn  | 画像右         |          |
| h2              | tableCell    |             |          |
| indentBlock     | テーブル削除       |             |          |
| イタリック           |              |             |          |
| リンク             |              |             |          |
| ol              |              |             |          |
| outdentBlock    |              |             |          |
| パラグラフ左          |              |             |          |
| パラグラフ右          |              |             |          |
| paragraphCenter |              |             |          |
| パラグラフ           |              |             |          |
| 見積もり            |              |             |          |
| removeFormat    |              |             |          |
| ストライク           |              |             |          |
| スタイル            |              |             |          |
| 添字              |              |             |          |
| 上付き             |              |             |          |
| twitter         |              |             |          |
| ul              |              |             |          |
| 下線              |              |             |          |


参照してください [ここで](https://alloyeditor.com/docs/features/) 各ボタンの機能の説明について。</li> 

4  AlloyEditorの構成を、行った変更で更新します。

   stylesToolbar.put("selections", selectionsJSONArray);
  
   toolbarsJSONObject.put("styles", stylesToolbar);
  
   jsonObject.put("toolbars", toolbarsJSONObject);

5 モジュール をデプロイし、AlloyEditorを使用する新しいコンテンツを作成します(ブログエントリやWebコンテンツの記事など)。新しい構成を実際に確認します\!

com.liferay.docs.my.button モジュールの更新されたテキストスタイルツールバーを次の図に示します。

図6:更新されたテキストスタイルツールバーを使用すると、エディターでテキストをコピー、切り取り、貼り付けできます。

関連トピック

追加ツールバーへのボタンの追加

CKEditorプラグインリファレンスガイド

« 追加ツールバーへのボタンの追加AlloyEditorの新しいボタンの作成 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています