Use CKEditor plugins button on AlloyEditor

Issue

• What are the steps to add the colorbutton plugin as an AlloyEditor button?
• This official documentation doesn't work on DXP by default and needs some extra configuration.

Environment

• DXP 7.0, DXP 7.1, DXP 7.2, DXP 7.3

Resolution

• The solution is to add on the configuration this extraPlugins needed along with colorbutton:

  "ae_uibridge,ae_richcombobridge,ae_panelmenubuttonbridge,ae_menubridge,ae_menubuttonbridge,ae_buttonbridge,colorbutton";

• In the case of colorbutton plugin, we have two buttons we can call and use: "TextColor", "BGColor"
• Take this sample code as a reference, changing AlloyEditorConfigContributor.java
  

  @Override
  public void populateConfigJSONObject(
     JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
     ThemeDisplay themeDisplay,
     RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
     super.populateConfigJSONObject(
        jsonObject, inputEditorTaglibAttributes, themeDisplay,
        requestBackedPortletURLFactory);
     jsonObject.put("entities", Boolean.FALSE);
     String extraPlugins = jsonObject.getString("extraPlugins");
     String extraPluginsNeeded = "ae_uibridge,ae_richcombobridge,ae_panelmenubuttonbridge,ae_menubridge,ae_menubuttonbridge,ae_buttonbridge,colorbutton";
     if (Validator.isNotNull(extraPlugins)) {
        extraPlugins += ",itemselector,media,embedurl," + extraPluginsNeeded;
     }
     else {
        extraPlugins = "itemselector,media,embedurl," + extraPluginsNeeded;
     }
     jsonObject.put(
        "extraPlugins", extraPlugins
     ).put(
        "toolbars", getToolbarsJSONObject(themeDisplay.getLocale())
     );
  }
  ...
  protected JSONObject getToolbarsStylesSelectionsTextJSONObject(
     Locale locale) {
     return JSONUtil.put(
        "buttons",
        JSONUtil.putAll(
           getStyleFormatsJSONObject(locale), "bold", "italic",
           "underline", "ol", "ul", "linkBrowse", "TextColor", "BGColor")
     ).put(
        "name", "text"
     ).put(
        "test", "AlloyEditor.SelectionTest.text"
     );
  }

Additional Information

• Documentation on how to change configuration of the editor inside DXP: Creating the OSGi Module and Configuring the EditorConfigContributor Class