Editing Div's within ckeditor - cannot edit the inner one

Question

So I have ckeditor and I've started editing it for my own uses. I use the http://ckeditor.com/addon/div to edit my div's.

All is well but if I have 2 div's.

<div id="div1"><div id="div2">fdsfds</div></div>

Then I can't edit the inner div, the dialog box just allows me to edit the outer one (div1)

Is there a way I can edit both, perhaps when I right click and both divs will appear in the list and I can select which one I want?

Either that or using the element path menu on the bottom left I can select my div and launch the div dialog?

Thanks for your help.

Answer 1

Changing the getSurroundDiv to this

CKEDITOR.plugins.div = {
        getSurroundDiv: function( editor, start ) {

            var path = editor.elementPath(start);

            for(i=0;i<path.elements.length;i++) {

                if(path.elements[i].is('div') && !path.elements[i].isReadOnly() ) {
                    return path.elements[i];
                }
            }
            /*
            may cause trouble with 
            return editor.elementPath( path.blockLimit ).contains( function( node ) {

                // Avoid read-only (i.e. contenteditable="false") divs (#11083).
                return node.is( 'div' ) && !node.isReadOnly();

            }, 1,false );
            */
        }
    };

Will help and enable you to edit the div that you are in. However now you can't edit the div above. At least a little step forward.

Answer 2

I've gone one step further and starting to use the elementspath to edit the relevent element.

Using a snippet I found in the ckeditor site.

function onDClick( elementIndex ) { editor.focus();

        alert(elementIndex);

        var element = elementsPath.list[ elementIndex ];

        var o = {};
        o.editor = editor;
        o.elementIndex = elementIndex;
        o.element = element;
        o.elementsPath = editor._.elementsPath;

        alert(element.getHtml());

        if(element.is('div')) {
            editor.execCommand( 'editdiv', element);
        }

    }

Is a good start, so working with that - although getting it to select the correct div is a pain.

Answer 3

Right final answer, hopefully useful for someone. I've made another dialogCommand and then used that to execute so heres the code and hope that people can use it.

In the ckeditor plugins div add.

var d = new CKEDITOR.dialogCommand( 'editdiv_main', { requiredContent: 'div' });
            d.exec = function( editor,data ) {

                d._element = data;

                editor.openDialog( d.dialogName,function(dialog ) {

                    dialog._element = data;
                    dialog.setupContent(data);
                });
            }

            editor.addCommand( 'editdiv_main', d);

around

editor.addCommand

commands.

change getsurrounddiv to.

CKEDITOR.plugins.div = {
        getSurroundDiv: function( editor, start ) {
            var path = editor.elementPath(start);

            for(i=0;i<path.elements.length;i++) {

                if(path.elements[i].is('div') && !path.elements[i].isReadOnly() ) {
                    return path.elements[i];
                }
            }

            //may cause trouble with 

            /*return editor.elementPath( path.blockLimit ).contains( function( node ) {

                // Avoid read-only (i.e. contenteditable="false") divs (#11083).
                return node.is( 'div' ) && !node.isReadOnly();

            }, 1 );*/

        }
    };

In div dialog.js. add

else if(command == 'editdiv_main'){

                    this.setupContent( this._element );

                } 

below the

if(command == 'editdiv') {

}

snippet

within the elementspath you need a new function for double click, I called mine onDClick

which looks like

function onDClick( elementIndex,t ) {
            editor.focus();

            var element = elementsPath.list[ elementIndex ];

            var o = {};
            o.editor = editor;
            o.elementIndex = elementIndex;
            o.element = element;
            o.elementsPath = editor.elementsPath;


            if(t.title.indexOf('div') >= 0) {

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

        }

Essentially you have finally a way of launching the div editor with the element that you have chosen.

Simples.

here are the links to the files.

Elements Path Plugin

Div Plugin File

div dialog plugin file