Question

i’m looking for a way to capture and selection a figure element (or any of its children)

ideally, i would like this to bypass the selections of imgs (including objectResizing on imgs) when they are within a figure tag.

i’ve played around with capturing the events using the currentInstance event. not sure if this is the best approach or whether there is another event. Obviously, i need some kind of event bubbling to know whether the event target (ie. the img) is within a figure element.

i have a sense of how to do this in javascript/jquery, but i’m looking for the proper ckeditor approach, since this is done in ckeditor with imgs and tables.

i have found one possible solution, which enables me to select the figure element, whether i click on one of its children or the figure itself. however, a double click triggers other events associated with the children, so i need to find a way to cancel those other events in this case

    editor.on( 'selectionChange', function( evt )
    {
        if ( editor.readOnly )
                return;

        /*
         * only select our figure elements
         */
        var element = evt.data.path.lastElement && evt.data.path.lastElement.getAscendant( 'figure', true );
        if ( element && element.getName() == 'figure' && element.getAttribute( 'data-media-id' ) && element.getChildCount() ) {
            editor.getSelection().selectElement(element);
        }
    });


    editor.on( 'doubleclick', function( evt )
    {
        var element = evt.data.element.getAscendant( 'figure', true );

        if ( !element.isReadOnly() )
        {
            if ( element.is( 'figure' ) || element.getParent().is( 'figure' ) )
            {   
                editor.getSelection().selectElement( element );

                editor.execCommand('imagemanager', element);
            }

        }
    });

Answer 1

turns out, i just need to pretend to open a dialog. my issue with the doubleclick is that i am not using ckeditor’s dialogs (because i am opening a ajax window and building it myself). so this prevents other windows from opening

    editor.on( 'doubleclick', function( evt )
    {
        var element = evt.data.element.getAscendant( 'figure', true );

        if ( !element.isReadOnly() )
        {
            if ( element.is( 'figure' ) || element.getParent().is( 'figure' ) )
            {   
                editor.getSelection().selectElement( element );

                editor.execCommand('imagemanager', element);

                // :HACK: pretend to open a dialog, cancels other dialogs from opening
                evt.data.dialog = '';
            }

        }
    });