bloggers bloggers

Torniamo a parlare di Alloy Editor per capire come abilitare una funzionalità molto utile ed, ahimè, molto necessaria: Incolla da Word.

Già, perchè purtroppo le persone hanno la brutta abitudine di scrivere su Word (mettendo font, grassetti, allineamenti, rientri, ...) e poi copiare il testo direttamente all'interno dell'editor del sito web, con il risultato che la resa grafica è terribile ed i metadati nascosti che vengono copiati sono un'inutile infinità.

Per fortuna i moderni editor HTML (tra cui CKEditor) sono in grado di gestire questa cosa, consentendo di incollare il testo di Word depurandolo da tutto quello che non serve. Anche Alloy Editor è in grado di farlo, ma bisogna configurarlo opportunamente.

Per i dettagli tecnici (le dipendenze, ...) vi rimando alla lettura del mio precedente articolo Allineamento del testo con Alloy Editor, adesso mi limiterò a farvi vedere direttamente il componente OSGi che dovete implementare.

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

    @Override
    public void populateConfigJSONObject(
        JSONObject jsonObject, Map<String, Object> inputEditorTaglibAttributes,
        ThemeDisplay themeDisplay,
        RequestBackedPortletURLFactory requestBackedPortletURLFactory) {
        
        String extraPlugins = jsonObject.getString("extraPlugins");
        if (Validator.isNotNull(extraPlugins))
            extraPlugins += StringPool.COMMA;
        extraPlugins += "ae_uibridge,ae_buttonbridge,pastefromword,clipboard,dialog,dialogui";
        jsonObject.put("extraPlugins", extraPlugins);

        JSONObject toolbars = jsonObject.getJSONObject("toolbars");
        if (toolbars != null) {
            JSONObject add = toolbars.getJSONObject("add");

            if (add != null) {
                JSONArray buttons = add.getJSONArray("buttons");

                buttons.put("PasteFromWord");
            }
        }
    }
}

In questo caso l'elemento chiave è extraPlugins; infatti prima di poter aggiungere il pulsante, bisogna abilitare alcuni plugin di CKEditor e questo si fa semplicemente aggiungedoli alla lista di quelli già presenti nell'oggetto di configurazione; se siete pignoli potete controllare se ci sono doppioni...

Una volta fatto questo potete aggiungere il pulsante, che si chiama PasteFromWord, all'interno della toolbar add; questa toolbar, per intenderci, è quella contrassegnata dal grande simbolo + sulla sinistra, la stessa che consente di aggiungere immagini, tabelle, ... Infatti, in questo caso, non dobbiamo modificare il testo selezionato ma agire direttamente sul contenuto dell'editor, nel punto in cui si trova il cursore.

Per maggiori dettagli consultare:

• https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-ckeditor-plugins-in-alloyeditor
• https://dev.liferay.com/develop/reference/-/knowledge_base/7-0/ckeditor-plugin-reference-guide