javascript - note - Opciones del grupo de barras de herramientas CkEditor para desplegable

text editor wysiwyg

Question

Tengo una pregunta sobre cómo agrupar algunas opciones de la barra de herramientas de CkEditor en el menú desplegable. Por ejemplo, si agrego esta opción [''JustifyLeft'', ''JustifyCenter'', ''JustifyRight'', ''JustifyBlock''] a la barra de herramientas, obtengo 4 botones. Como creo que esto es un desperdicio de espacio en la barra de herramientas, me gustaría poner las 4 opciones a la lista desplegable, que solo 1 (seleccionado) sería visible.

¿Es eso posible? Encontré esta solución

CKEDITOR.replace( ''editor'', {
    plugins: ''wysiwygarea,sourcearea,basicstyles,toolbar,menu,menubutton,justify'',
    on: {
        pluginsLoaded: function() {
            var editor = this,
                items = {};

            editor.addMenuGroup( ''some_group'' );

            items.justifyleft = {
                label: editor.lang.justify.left,
                group: ''some_group'',
                command: ''justifyleft'',
                order: 1
            };

            items.justifyright = {
                label: editor.lang.justify.right,
                group: ''some_group'',
                command: ''justifyright'',
                order: 2
            };

            editor.addMenuItems( items );

            editor.ui.add( ''Groupped'', CKEDITOR.UI_MENUBUTTON, {
                label: ''Groupped justify'',
                // Disable in source mode.
                modes: { 
                    wysiwyg: 1 
                },
                icon: ''JustifyLeft'',
                onMenu: function() {
                    var active = {};

                    // Make all items active.
                    for ( var p in items )
                        active[ p ] = CKEDITOR.TRISTATE_OFF;

                    return active;
                }
            } );                       
        }
    }
} );

en http://jsfiddle.net/oleq/vmYCF/ , pero como puede ver, ahora tengo ambas opciones - 4 botones + desplegable, por lo que no es aceptable para mí. Y también en ese caso, no puedo establecer otras barras de herramientas (y no sé por qué no).

Gracias por cualquier ayuda

Atentamente

Answer 1

Pude entender esto, aunque es un poco hacky. Convertí ese código en tu publicación en un complemento, y luego agregué esto al CSS.

.cke_button__justifyleft, 
.cke_button__justifyright, 
.cke_button__justifycenter,
.cke_button__justifyblock {
    display: none !important;
}

Por alguna razón, el complemento requiere que se cargue el complemento justify y se agregue a la barra de herramientas para que los íconos desplegables en el complemento justifygroup aparezcan correctamente. Ocultar los 4 botones extra es el truco.

Aquí está el plugin:

CKEDITOR.plugins.add( ''justifygroup'', {
    // jscs:disable maximumLineLength
    requires: "wysiwygarea,basicstyles,toolbar,menu,menubutton,justify",
    lang: ''af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn'', // %REMOVE_LINE_CORE%
    // jscs:enable maximumLineLength
    hidpi: true, // %REMOVE_LINE_CORE%
    tabToOpen:null,
    init: function( editor ) {
        if ( editor.blockless )
            return;

        items = {};

        editor.addMenuGroup( ''some_group'' );

        items.justifyleft = {
            label: editor.lang.justify.left,
            group: ''some_group'',
            command: ''justifyleft'',
            order: 1
        };
        items.justifycenter = {
            label: editor.lang.justify.center,
            group: ''some_group'',
            command: ''justifycenter'',
            order: 2
        };

        items.justifyright = {
            label: editor.lang.justify.right,
            group: ''some_group'',
            command: ''justifyright'',
            order: 3
        };

        items.justifyblock = {
            label: editor.lang.justify.block,
            group: ''some_group'',
            command: ''justifyblock'',
            order: 4
        };

        if (editor.addMenuItems) {
            editor.addMenuItems( items );
        }

        editor.ui.add( ''Grouped'', CKEDITOR.UI_MENUBUTTON, {
            label: ''Grouped justify'',
            icon: ''JustifyLeft'',
            toolbar: "align",
            modes: { 
                wysiwyg: 1 
            },
            onMenu: function() {
                var active = {};

                // Make all items active.
                for ( var p in items )
                    active[ p ] = CKEDITOR.TRISTATE_OFF;

                return active;
            }
        } );                       
    }
} );