Question

I am currently trying to use CKEditor to add XML entries. I modified the sample plugin’s code:

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
return {
    title: 'Abbreviation Properties',
    minWidth: 400,
    minHeight: 200,
    contents: [
        {
            id: 'tab-basic',
            label: 'Basic Settings',
            elements: [
                {
                    type: 'text',
                    id: 'abbr',
                    label: 'Title',
                    validate: CKEDITOR.dialog.validate.notEmpty( "Title cannot be empty" )
                },
                {
                    type: 'text',
                    id: 'title',
                    label: 'Price',
                    validate: CKEDITOR.dialog.validate.notEmpty( "Price cannot be empty" )
                }    
            ]
        },
        {
            id: 'tab-adv',
            label: 'Advanced Settings',
            elements: [
                {
                    type: 'text',
                    id: 'id',
                    label: 'Id'
                }
            ]
        }
    ],          
    onOk: function() {
        var dialog = this;

        var abbr = editor.document.createElement( 'abbr' );
        abbr.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
        abbr.setText( dialog.getValueOf( 'tab-basic', 'abbr' ) );

        var id = dialog.getValueOf( 'tab-adv', 'id' );
        if ( id )
            abbr.setAttribute( 'id', id );

        editor.insertElement( abbr );
    }
};

});

However, when I click the editor again to add more items the tags became nested, like . This is not desired. How can I restrict that there will be no any tag inside another tag? Thanks

Answer 1

This will retrieve the element under your caret:

var selectedElement = editor.getSelection().getStartElement();

And with this you can retrieve the closest ascendant of a specific type:

selectedElement.getAscendant( 'abbr', 1 );

Basically, when there’s one, don’t insert anything and/or update selectedElement with new attributes, properties, etc.

---

BTW: This will give you an iterable array of parent elements (towards DOM root) if you wish to have a more specific filtering:

selectedElement.getParents();