スタイルツールバーへのボタンの追加
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
AlloyEditorでコンテンツが選択または強調表示されると、スタイルツールバーが表示されます。 次から選択できる5つのスタイルツールバーがあります。
embedurl
:埋め込みコンテンツが選択されたときに表示されます。
画像
:画像が選択されたときに表示されます。
リンク
:ハイパーリンクが選択されたときに表示されます。
table
:テーブルが選択されたときに表示されます。
text
:テキストが強調表示されたときに表示されます。
次の手順に従って、スタイルツールバーの1つにボタンを追加します。
-
populateConfigJSONObject()
メソッド内で、スタイルツールバーを取得します。JSONObject stylesToolbar = toolbarsJSONObject.getJSONObject("styles"); if (stylesToolbar == null) { stylesToolbar = JSONFactoryUtil.createJSONObject(); }
-
利用可能な選択ツールバーを取得します。
JSONArray selectionsJSONArray = stylesToolbar.getJSONArray( "selections");
-
選択ツールバーを繰り返し処理では、あなたが(にあるボタン(複数可)を追加したいものを選択
embedurl
、、画像
、リンク
、表
、またはテキスト
)、既存のボタンを取得し、追加するにはボタン。 以下の例では、追加クリップボード
プラグインのコピー
、カット
、及びペースト
にボタンをテキスト
選択ツールバー。 ボタンは大文字と小文字が区別され、エイリアスされるか、プラグインの名前と一致しない場合があります。 プラグインのplugin.js
ファイル foreditor.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
モジュールの更新されたテキストスタイルツールバーを次の図に示します。