AlloyEditorへのボタンの貢献

AlloyEditorへのボタンの貢献

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

• AlloyEditorへのボタンの貢献
  • 関連トピック

ボタンを作成したら、使用可能なボタンのリストに追加できます。 これは、エディターのインフラストラクチャにスマートに配置された <liferay-util:dynamic-include /> タグのおかげで実現できます。 AlloyEditorでボタンを使用可能にするには、 BaseDynamicInclude クラス拡張する必要があります。 以下は、このクラスを拡張する構成例です。

1. DynamicInclude.class サービスを実装し、 BaseDynamicIncludeを拡張するコンポーネントクラスを作成します。

   @Component(immediate = true, service = DynamicInclude.class)
   public class MyButtonDynamicInclude extends BaseDynamicInclude {
   

2. include（） メソッドをオーバーライドして、トランスコンパイルされたJSXファイルにスクリプトを含めます。 StringBundler を使用して、スクリプトを連結できます。 sb.append（ "/ js / buttons.js"） 行下に注意してください。 これは、 バンドルの build.gradle transpileJS タスク定義した bundleFileName です。

   @Override
   public void include(
                   HttpServletRequest request, HttpServletResponse response,
                   String key)
           throws IOException {
   
           ThemeDisplay themeDisplay = (ThemeDisplay)request.getAttribute(
                   WebKeys.THEME_DISPLAY);
   
           PrintWriter printWriter = response.getWriter();
   
           StringBundler sb = new StringBundler(7);
   
           sb.append("<script src=\"");
           sb.append(themeDisplay.getPortalURL());
           sb.append(PortalUtil.getPathProxy());
           sb.append(_servletContext.getContextPath());
           sb.append("/js/buttons.js");
           sb.append("\" ");
           sb.append("type=\"text/javascript\"></script>");
   
           printWriter.println(sb.toString());
   }
   

3. register（） メソッドをオーバーライドして、 additionalResources 動的インクルードを使用してスクリプトを追加します。 @Reference アノテーションの ターゲット 値は、 bnd.bnd ファイルで定義されているバンドルのシンボル名です。

       @Override
       public void register(DynamicIncludeRegistry dynamicIncludeRegistry) {
               dynamicIncludeRegistry.register(
                       "com.liferay.frontend.editor.alloyeditor.web#alloyeditor#" +
                               "additionalResources");
       }
   
       @Reference(
               target = "(osgi.web.symbolicname=com.liferay.frontend.editor.alloyeditor.my.button.web)"
       )
       private ServletContext _servletContext;
   

   }

ボタンが含まれたので、「 AlloyEditorのツールバーへのボタンの追加 チュートリアル」で説明されている手順に従って、ボタンをエディターのツールバーに追加できます。

関連トピック

エディターに新しい動作を追加する

ボタンのJSXファイルの作成

WYSIWYG Editor Dynamic Includes