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.
![](/documents/185441/186313/alloy_editor_menu.png/7dd30edf-28c1-4eb8-9795-5d58e53e0be6?t=1516178251814)
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:
![](/documents/185441/186313/alloy_editor_menu2.png/54990407-22f7-464f-af86-d4a3bf371b39?t=1516180298264)
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: