在 ckeditor 中选择图形元素 - 捕获单击图形元素（或任何子元素）答案

【问题标题】：select figure element in ckeditor - capture click on figure element (or any children)在 ckeditor 中选择图形元素 - 捕获单击图形元素（或任何子元素）
【发布时间】：2011-06-29 04:15:51
【问题描述】：

我正在寻找一种方法来捕获和选择图形元素（或其任何子元素）

理想情况下，当它们位于图形标签内时，我希望它绕过 imgs 的选择（包括 imgs 上的 objectResizing）。

我已经尝试过使用 currentInstance 事件捕获事件。不确定这是否是最好的方法或是否还有其他事件。显然，我需要某种事件冒泡来了解事件目标（即 img）是否在图形元素内。

我知道如何在 javascript/jquery 中执行此操作，但我正在寻找合适的 ckeditor 方法，因为这是在带有 imgs 和表格的 ckeditor 中完成的。

我找到了一种可能的解决方案，它使我能够选择图形元素，无论是单击其子元素之一还是单击图形本身。但是，双击会触发与孩子相关的其他事件，所以在这种情况下我需要找到一种方法来取消这些其他事件

    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);
            }

        }
    });

【问题讨论】：

标签： ckeditor

【解决方案1】：

原来，我只需要假装打开一个对话框。我对双击的问题是我没有使用ckeditor的对话框（因为我正在打开一个ajax窗口并自己构建它）。所以这可以防止其他窗口打开

    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 = '';
            }

        }
    });

【讨论】：