bloggers bloggers

Liferay 7 introduce tante novità tra cui Alloy Editor, il nuovo e potente editor HTML derivato da CKEditor.

Tutto molto bello ed interessante ma chi di voi ha avuto modo di utilizzarlo si sarà sicuramente chiesto come fare per allineare il testo.

Perchè mi consente di inserire tabelle, cambiare lo stile ma non allineare il testo? E' impossibile che Alloy Editor non consenta di farlo...

Infatti è vero, Alloy Editor può farlo ma bisogna scrivere qualche riga di codice per abilitare i pulsanti; innanzitutto aggiungete questa dipendenza nel vostro file build.gradle:

compileOnly group: "com.liferay", name: "com.liferay.journal.api", version: "2.9.2"

Dopodichè aggiungete la seguente classe Java al vostro bundle web:

@Component(property = {
    "editor.name=alloyeditor",
    "javax.portlet.name=" + JournalPortletKeys.JOURNAL,
    "service.ranking:Integer=100"
}, service = EditorConfigContributor.class)
public class TextAlignmentEditorConfigContributor
    extends BaseEditorConfigContributor {

    @Override
    public void populateConfigJSONObject(
        JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
        ThemeDisplay themeDisplay,
        RequestBackedPortletURLFactory requestBackedPortletURLFactory) {

        JSONObject toolbars = jsonObject.getJSONObject("toolbars");

        if (toolbars != null) {
            JSONObject toolbarStyles = toolbars.getJSONObject("styles");

            if (toolbarStyles != null) {
                JSONArray selections = toolbarStyles.getJSONArray("selections");

                if (selections != null) {
                    for (int i = 0; i < selections.length(); i++) {
                        JSONObject selection = selections.getJSONObject(i);

                        if (selection.has("name") &&
                            selection.getString("name").equals("text")) {
                            JSONArray buttons = selection.getJSONArray("buttons");

                            if (buttons != null) {
                                buttons.put("paragraphLeft");
                                buttons.put("paragraphCenter");
                                buttons.put("paragraphRight");
                                buttons.put("paragraphJustify");
                            }

                            break;
                        }
                    }
                }
            }
        }
    }
}

La classe rappresenta un componente di tipo EditorConfigContributor che è l'elemento adibito a modificare la configurazione dell'editor HTML; il componente possiede alcune proprietà attraverso le quali è possibile fare modifiche molto granulari:

• editor.config.key, è una proprietà ripetibile che rappresenta lo specifico campo del form in cui modificare la configurazione (contentEditor, summaryEditor, ...);
• editor.name, è una proprietà ripetibile che rappresenta il tipo di editor di cui modificare la configurazione (alloyeditor, ckeditor, ...);
• javax.portlet.name, è una proprietà ripetibile che rappresenta il nome della portlet in cui modificare la configurazione (può essere anche una portlet custom);
• service.ranking:Integer, rappresenta la priorità del componente (potrebbero essercene più di uno da eseguire).

La nostra classe estende poi la superclasse BaseEditorConfigContributor che si occupa di tutto il lavoro e ci obbliga ad implementare unicamente il metodo populateConfigJSONObject; questo metodo possiede alcuni parametri tra cui jsonObject che rappresenta la configurazione corrente dell'editor HTML.

Tutto quello che abbiamo fatto nel codice è stato recuperare la sezione della configurazione che contiene i pulsanti ed aggiungere in fondo quelli adibiti all'allineamento del testo. Ecco quello che otteniamo:

Attenzione perchè non abbiamo implementato l'allineamento del testo, quello già esisteva in Alloy Editor con tanto di icone; abbiamo solo aggiunto i pulsanti con il loro nome specifico.

Per maggiori dettagli consultare:

• https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/modifying-an-editors-configuration
• https://alloyeditor.com/docs/use/