AlloyEditorの新しいボタンの作成
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
AlloyEditorは React.js
上に構築され、 jsx
を使用してエディターの各ボタンをレンダリングします。 AlloyEditorに新しいボタンを追加するには、3つのキーピースを含むOSGiバンドルを作成する必要があります。
- ボタンの構成を含むJSXファイル
- 利用可能なボタンのリストにボタンを提供するJavaクラス
- AlloyEditorのツールバーにボタンを追加するJavaクラス
以下は、新しいボタンを追加するモジュールのフォルダー構造です。
frontend-editor-my-button-web
-
src
main
java
com/liferay/frontend/editor/my/button/web/
editor
configuration
AlloyEditorMyButtonConfigContributor.java
servlet
taglib
AlloyEditorMyButtonDynamicInclude.java
resources
META-INF
resources
js
my_button.jsx
-
.babelrc
-
bnd.bnd
-
build.gradle
-
package.json
-
このセクションのチュートリアルでは、次のトピックについて説明します。
- ボタンのOSGiバンドルを作成する方法
- ボタンのJSXファイルを作成する方法
- 利用可能なボタンのリストにボタンを提供する方法
EditorEditorのツールバーにボタンを追加するチュートリアル、エディターのツールバーにボタンを追加する方法を学ぶことができます。
my-log-text-button
bundle は、このチュートリアル全体を通して例として使用されます。 次のことができます ダウンロードバンドルのzipファイル 参照のために、または必要に応じて、プロジェクトの開始点として使用します。